I am new to React Native and wanted to create a text with border. Therefore I checked the docs at https://facebook.github.io/react-native/docs/text - the word "border" appears exactly zero times. However, border is available on Text and this works fine:
<Text style={{fontSize: 30, borderWidth: 1, borderColor: 'red'}}>Hello, world!</Text>
But where is this documented? Did I look at the wrong place? Thanks!
It is included under the style prop, there is a link to the inherited View Style Props that include the border details that you are after.
Related
I have a problem with ScrollView in React-Natives. I've already looked for it in the react-native docs, but still unable to find it. Because of this I need to include an image since I don't even know how to call it.
Is it possible to change the "purple" color in this picture? How? And what is this "purple" thing called?
Here's my code to give a clue.
The ScrollView:
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
>
The styles
scrollContainer: {
marginTop: 20,
marginHorizontal: 10,
color: "#fff",
},
Thank you
This is the overScroll glow effect on android devices and can be disabled using the overScrollMode prop. You need to set it to never as follows.
<ScrollView
horizontal={true}
showsHorizontalScrollIndicator={false}
style={style.scrollContainer}
endFillColor="#000"
overScrollMode="never"
>
I have created a little snack that showcases this prop. Notice that I have disabled this for the horizontal scrollview and enabled it for the vertical scrollview.
Changing the color is only possible by adding <item name="android:colorEdgeEffect">#E53644</item> to your styles.xml as discussed here, whereby #E53644 is the hexcode of the color of choice.
I am using react-native-paper DataTable to layout my screen. So far, everything is going ok, but I have not been able to delete the line that separates the rows in the table (DataTable.Row). Do you know how to do it? You can refer to the documentation here
The DataTable.Row documentation shows it has a style prop, you can use that to set the bottom border width to 0
<DataTable.Row style={{ borderBottomWidth: 0 }}>
...
</DataTable.Row>
I have react-native TextInput that automatically grows if I input long strings. On iOS it works as expected, but on Android, it starts cutting-off left side after 5-7 characters. The longer the string - the bigger cut-off. I tried to remove margins and paddings - no change. I looked into props in documentation - couldn't find a solution yet. I can scroll to see the cutted-off string, but I would like to see it without scrolling unless there is no more space to grow.
<TextInput
key={key}
style={{
flex:1,
fontSize: '1.2rem',
fontWeight: 'bold',
}}
value={this.state.value}
onChangeText={this._onChangeText}
underlineColorAndroid="transparent"
autoCapitalize="none"
autoCompleteType='off' // Android
autoCorrect={false} // iOS
contextMenuHidden={true}
importantForAutofill="no"
keyboardAppearance="dark"
maxLength={150}
returnKeyType={returnKeyType}
spellCheck={false}
keyboardType={Platform.OS==='ios'
?'default'
:"visible-password" // to disable autocorrect suggestions on android
}
/>
Setting textBreakStrategy to simple on the TextInput element also seems to work for some devices.
Basically this is the conflict with the system font, so you can specify some other fontFamily for your text input. On more hack can be adding some extra space on left
When I was preparing the question I found out that setting fontWeight: 'bold' causes this issue. But I am still looking at how to make it work with the bold text (if possible).
I tried to find a font which is bold without bold property, but it behaves the same... So it seems that TextInput works fine only with the default font, without bold property, which is unhandy.
Issue on github: https://github.com/facebook/react-native/issues/30317
Good day! I'm creating a mobile application that I want to implement it with different color of shadows. But I tried to change hex code of colors but it does not change it is always black. How can I do it both Android and iOS platform? If impossible, suggest me any custom to create a different color of shadow. Thank you!
I haven't use shadows before, but I found someone suggest use cardview instead view to show shadow effect on both android and ios. And same suggest in many different places, maybe you can try to see. Hope it helps.(I'm not sure if it could change color from using background color)
<CardView
cardElevation={3}
cardMaxElevation={3}
cornerRadius={3}
style={{
height: 60,
justifyContent: 'center',
alignItems: 'center',
margin: 20,
backgroundColor: '#ffffff' //color?
}}
<Text>
Elevation
</Text>
</CardView>
someones answer on github
react-native-cardview
example
Looking for a solution for this problem since 2 days and the internet didn't provide me with a solution for the first time of my life, so this is my first post on StackOverflow :)
So, I'm building a react-native (0.59.8) app with Expo (3.4.1), testing with Android 9.1.
I have an email TextInput that looks like that :
const style = {
backgroundColor: '#181818',
color: '#fafafa',
width: '100%',
borderColor: $primary,
borderWidth: 1,
borderRadius: 4,
marginBottom: 16,
padding: 8,
};
return (
<TextInput
placeholder="Email"
keyboardType="email-address"
autoCompleteType="email"
style={style.input}
autoCorrect={false}
selectionColor={$primary}
/>
);
The TextInput is first shown as expected, and there are no problems when I fill it manually (typing my email address).
But, when I select an Android suggestion, the TextInput style changes (colour become light yellow, backgroundColor become yellow/green, and borderColor become orange) that is a bit ugly :/.
It looks like the behaviour is the same as -webkit-text-fill-color in standard CSS, but can't find the counterpart in RN.
Thanks for your help :)
https://developer.android.com/guide/topics/text/autofill-optimize#highlighted
You can customized the styling using the android xml files. See here for more details.