The problem is with React-native-papers and TextInput component.(And maybe the lack of my css/flexbox knowledge)
When alignItems: 'center' is used on a View above TextInput in the tree the TextInput's rendering is wonky. It takes the full height of the screen and has a very narrow width. A css width property must be specified in the component hierarchy between the View with alignItems: 'center' and the TextInput or on the TextInput itself.
There is a Github issue thats closed.
https://github.com/callstack/react-native-paper/issues/2335
return (
<View style={{flex: 1, alignItems: "center", justifyContent: "center"}}>
<TextInput label='Email' value='' />
<TextInput label='Password' value='' />
</View>
);
}
Issue can be reproduced with this Snack. Only on device tho, looks fine on web.
https://snack.expo.dev/#parriz/paper---weird-textinput-behaviour
Exact same code setup. But with core React Native components. (Works as expected)
https://snack.expo.dev/#parriz/default-react-native
Exact same code setup. But with core React-native-elements components. (Works as expected)
https://snack.expo.dev/#parriz/great-donuts
My questions:
Arent components inside a flexbox supposed to grow as needed to fit the content? (Hence, this behaviour is a bug?)
If anyone used native-papers before, how did you handle the issue? Did you just explicitly set a width on all your TextInputs? Is this how you normally do?
Why is the outcome so diffrent on web and on device? I tought the result was supposed to be equivalent on React Native and React Native Web?
Related
I was wondering if anybody has encountered any issues with form input elements when using Material UI and custom web fonts (the 'Poppins' web font to be exact)?
It seems that characters are cut off from the input even though a full width (100%) style is applied to the element and parent containers.
It just seems that the input width does not adapt when the input value is updated (this does seem to work for other fonts but not the Poppins font)
Input with Poppins
Input without Poppins
The TextField Markup I have is:
<TextField
label={label}
error={hasError}
helperText={errorText || helperText}
InputProps={{
endAdornment: (
<InputAdornment
position="end"
style={{ marginLeft: 0, marginBottom: 4 }}
>
<CalendarMonth fontSize="small" />
</InputAdornment>
),
}}
/>
It's probably something silly I'm missing, but any pointers in the right direction on this would be much appreciated
We have some legacy code that I'm working to refactor styling in.
Right now, there are 3+ files (each representing a page within a wizard) with a styling constant at the top of each file feeding into TextFields and Buttons. Each of these constants have mostly the same content.
I'd like to put the common styling in another, separate file and then apply those styles across each page in the wizard that uses them.
Initially, I thought about using themes, but the use case may not be conducive to it. In each of the three files/pages, I'm seeing pairs of TextFields with different styles applied to them:
<div>
<TextField
id="upload-name"
label="Upload Name"
value={this.state.label}
onChange={this.handleChange('label')}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
/>
</div>
<div>
<TextField
id="upload-description"
label="Description"
value={this.state.description}
onChange={this.handleChange('description')}
multiline={true}
margin="normal"
variant="outlined"
className="form-input"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes:{
root: classes.textArea
}
}}
/>
</div>
Specifically, the lower TextField's getting two different classes in two different ways. I've been trying to figure out if there's a way of passing all classes needed from a CSS module but neither the approach above nor root: styles.textArea seem to work.
How can I change the background color of the Table Row, I tried using "BackgroundColor" but it didn't change
How can i solve the problem?
<TableRow style={{ backgroundColor: "#FF0000" }}>
<TableCell>
<Button>All</Button>
</TableCell>
</TableRow>
try: background-color instead of backgroundColor
Never used react before, thats just the traditional css way.
Your code should work fine. See below for a working example with your exact same attempt:
You can find the codesandbox reproduction here. You can also look into the sx prop when working with MUI components.
I need to use a transfer component from antd for a page, but the default size is way too small. I have tried to change it using the listStyle and style attributes. I've read through the documentation and don't see any other style options. When it's rendered, I can see that I need to change the size of the "ant-transfer-list"
<TransferComponent
style={{
height:1000
}}
listStyle={{
width: 1000,
height: 1000,
}}
formattedInput={this.state.formattedObjectTypes}
onSelectChange={this.onSelectChange}
sourceName="Available"
targetName="Selected"
/>
My jsx is as shown. I've tried both height:1000 and height:"1000px" with no change on either listStyle or style.
The property listStyle works for me:
<Transfer
listStyle={{width: 500}}
/>
I'm trying to implement various embed in a react-native application;
They have these structures
Twitter
<blockquote class=\"twitter-tweet\" data-width=\"500\"><p lang=\"en\" dir=\"ltr\">i recorded my calc professor for an entire semester, I hope he never sees this but... GOOOD MORNINGGGG pic.twitter.com/lTXGcd1Jf0</p>— Edward Chai (#edwardchaii) July 21, 2018</blockquote>\n<script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n
Spotify
<iframe src=\"https://open.spotify.com/embed/track/2dgrYdgguVZKeCsrVb9XEs%3Fsi%3DQ7ihpJ__RCSHIgTzf1_QBA\" width=\"300\" height=\"380\" frameborder=\"0\" allowtransparency=\"true\" allow=\"encrypted-media\"></iframe>
Using react-native-webview module and this structure in my Component
<View style={{flex: 1, height: 300, width: 350, marginVertical: 10, position: "relative"}}>
<WebView
originWhitelist={["*"]}
style={{width: "100%"}}
onLoad={this.onLoad}
onLoadEnd={this.onLoad}
javaScriptEnabled={true}
// useWebKit={false}
injectedJavascript={this.state.injectedJavaScript}
source={{html: this.state.html}}
startInLoadingState={true}
/>
</View>
The result is (on iOS simulator)
As you can see there are a couple of problems:
Since the container View must have a width and a height value it does not respect the embed size; sometimes it's taller sometimes it's smaller sometimes it's wider
The embed doesn't fit its container; I tried to put width: 100% but even if it fits the width I still have the container height fixed which leaves a lot of blank space.
I don't know where to put my hands, I tried a lot of hacky solution but it doesn't seem to work at all
Did you tried using scalepagetofit property ?, it should match the view