I am trying to implement SafeAreaProvider and SafeAreaView by the react-native-safe-area-context lib in my react-native application. My version of react-navigation is 5.
I followed the documentation provided in react-navigation, I wrapped my NavigationContainer within SafeAreaProvider. And inside my views I inserted the SafeAreaView. But my drawer still fills the space on my entire screen.
How I need my drawer keep:
Can you tell me how I can make SafeAreaView work in my Menu Drawer?
I put my project in the snack.expo.io so that they can see the whole project.
Thank you very much in advance!!
Style the content of your drawer in a nested View component ... not in the SafeAreaView
<SafeAreaView style={{ backgroundColor: '#fff', flex: 1 }}>
{/* Here's your container */}
<View style={{ flex: 1, backgroundColor: '#3b8324', borderTopLeftRadius: 25, }}>
<Text>Start</Text>
</View>
</SafeAreaView>
To change the width of your drawer, set drawerWidth of your DrawerNavigatorConfig
const DrawerNavigatorConfig = {
/** ...configs */
drawerWidth: 200,
};
React Nav 5
<Drawer.Navigator
drawerStyle={{ width: YOUR_DRAWER_WIDTH }}
/**...*/
>
I want to change style in part of Text in React Native.
I tried this :
<Text style={styles.parent}>
Dernier message : <Text style={[styles.children, {
color: 'red',
paddingLeft: 10,
borderWidth: 5,
borderColor: 'black',
}]}>Coucou</Text>
</Text>
const styles = StyleSheet.create({
parent: {
backgroundColor: 'yellow',
},
children: {
backgroundColor: 'blue',
},
})
Parent background color is changed - good
Children color and background color is changed - good
Children padding left and border is not changed
Can you help me ? Thanks
The <Text> element is special as far as layout is concerned. From the docs: "everything inside is no longer using the flexbox layout but using text layout. This means that elements inside of a <Text> are no longer rectangles, but wrap when they see the end of the line."
To achieve what you seem to be looking for, it's probably advisable to use a wrapping<View> with two inner <Text>s.
PFB the expo snack link. Hope it helps
Expo link
I want to display a link button instead of button on my react native page. Right now I have the below code:
<Button onPress={this.handleGetDirections} title="Get Directions" />
I want to show the above button as a link. How can I achieve this in React Native.
Thank You.
Use textDecorationLine.
E.g :
<TouchableOpacity>
<Text style={styles.underLineText}>Your underline Text</Text>
</TouchableOpacity>
underLineText: {
fontSize: 12,
textDecorationLine: 'underline',
color: 'white',
fontWeight: 'bold',
textAlign: 'center',
}
If it is about the styling of a link within the browser. That's done by the default browser vendor styles. You won't have that happen in react-native.
You can have a simple Text element that is styled to look like a link (ie: blue) and have a onPress handler for that.
Just follow Pritish Vaidyas... link :)
Hope this helps
I am developing an App with react native and I have graphical problem. I need to have a dynamic yellow bar(which is in a view) for my text as below:
So, it means that if I have a longer text, the bar should be longer and if the text is shorter, the bar also should be shorter and fit for it. By now I use the static method. I give 90 as the width to the bar which is not good. Here is the code:
<View style={[styles.rowSep, {width:90}]}/>
<Text style={[commonStyle.normalItem , {marginBottom:10}]}>
{I18n.t("Il_Museum_Modena")}
</Text>
Here is the style:
rowSep: {
height: 7,
marginVertical: 4,
//width: Dimensions.get('window').width,
backgroundColor: '#FABB00',
marginBottom:12,
},
Can you help me to have dynamic yellow bar based on the length of the text. Thanks in advance.
You can wrap Text with View and set view StyleSheet to get effect what you want.
Example:
<View style={styles.textwrapper}>
<Text>Just test</Text>
</View>
Style:
textwrapper: {
borderBottomWidth: 5px,
borderBottomColor: #234532,
borderStyle: 'solid'
}
I haven't test this code, but I hope this give you some hints.
Import_this
import {AppRegistry, Text, View, Button, StyleSheet} from 'react-native';
This my React Button code But style not working Hare ...
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={{color: 'red', marginTop: 10, padding: 10}}
/>
Also I was try by this code
<Button
containerStyle={{padding:10, height:45, overflow:'hidden',
borderRadius:4, backgroundColor: 'white'}}
style={{fontSize: 20, color: 'green'}}
onPress={this.onPress.bind(this)} title={"Go Back"}
> Press me!
</Button>
Update Question:
Also I was try by This way..
<Button
onPress={this.onPress.bind(this)}
title={"Go Back"}
style={styles.buttonStyle}
>ku ka</Button>
Style
const styles = StyleSheet.create({
buttonStyle: {
color: 'red',
marginTop: 20,
padding: 20,
backgroundColor: 'green'
}
});
But No out put:
Screenshot of my phone:-
The React Native Button is very limited in what you can do, see; Button
It does not have a style prop, and you don't set text the "web-way" like <Button>txt</Button> but via the title property <Button title="txt" />
If you want to have more control over the appearance you should use one of the TouchableXXXX' components like TouchableOpacity
They are really easy to use :-)
I had an issue with margin and padding with a Button. I added Button inside a View component and apply your properties to the View.
<View style={{margin:10}}>
<Button
title="Decrypt Data"
color="orange"
accessibilityLabel="Tap to Decrypt Data"
onPress={() => {
Alert.alert('You tapped the Decrypt button!');
}}
/>
</View>
React Native buttons are very limited in the option they provide.You can use TouchableHighlight or TouchableOpacity by styling these element and wrapping your buttons with it like this
<TouchableHighlight
style ={{
height: 40,
width:160,
borderRadius:10,
backgroundColor : "yellow",
marginLeft :50,
marginRight:50,
marginTop :20
}}>
<Button onPress={this._onPressButton}
title="SAVE"
accessibilityLabel="Learn more about this button"
/>
</TouchableHighlight>
You can also use react library for customised button .One nice library is react-native-button (https://www.npmjs.com/package/react-native-button)
If you do not want to create your own button component, a quick and dirty solution is to wrap the button in a view, which allows you to at least apply layout styling.
For example this would create a row of buttons:
<View style={{flexDirection: 'row'}}>
<View style={{flex:1 , marginRight:10}} >
<Button title="Save" onPress={() => {}}></Button>
</View>
<View style={{flex:1}} >
<Button title="Cancel" onPress={() => {}}></Button>
</View>
</View>
Instead of using button . you can use Text in react native and then make in touchable
<TouchableOpacity onPress={this._onPressButton}>
<Text style = {'your custome style'}>
button name
</Text>
</TouchableOpacity >
Style in button will not work, You have to give style to the view.
<View style={styles.styleLoginBtn}>
<Button
color="orange" //button color
onPress={this.onPressButton}
title="Login"
/>
</View>
Give this style to view
const styles = StyleSheet.create({
styleLoginBtn: {
marginTop: 30,
marginLeft: 50,
marginRight: 50,
borderWidth: 2,
borderRadius: 20,
borderColor: "black", //button background/border color
overflow: "hidden",
marginBottom: 10,
},
});
Only learning myself, but wrapping in a View may allow you to add styles around the button.
const Stack = StackNavigator({
Home: {
screen: HomeView,
navigationOptions: {
title: 'Home View'
}
},
CoolView: {
screen: CoolView,
navigationOptions: ({navigation}) => ({
title: 'Cool View',
headerRight: (<View style={{marginRight: 16}}><Button
title="Cool"
onPress={() => alert('cool')}
/></View>
)
})
}
})
Try This one
<TouchableOpacity onPress={() => this._onPressAppoimentButton()} style={styles.Btn}>
<Button title="Order Online" style={styles.Btn} > </Button>
</TouchableOpacity>
You can use Pressable with Text instead of button.
import { StyleSheet, Text, View, Pressable } from 'react-native';
<Pressable style={styles.button} onPress = {() => console.log("button pressed")}>
<Text style={styles.text}>Press me</Text>
</Pressable>
Example Style:
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'red'
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: 'white',
},
});
We can use buttonStyle prop now.
https://react-native-training.github.io/react-native-elements/docs/button.html#buttonstyle
React-native button is very limited, it won't allow styling. use react native elements button or create custom button
button styles does'nt work in react-native, to style your button in react-native easy way is to put it inside the View block like this:
<View
style={styles.buttonStyle}>
<Button
title={"Sign Up"}
color={"#F31801"}/>
</View>
style.buttonStyle be like this:
style.buttonStyle{
marginTop:30,
marginLeft:50,
marginRight:50,
borderWidth:2,
borderRadius:20,
borderColor:'#F31801',
overflow:"hidden",
marginBottom:10,
}
, it will make you able to use designs with buttons
As the answer by #plaul mentions TouchableOpacity, here is an example of how you can use that;
<TouchableOpacity
style={someStyles}
onPress={doSomething}
>
<Text>Press Here</Text>
</TouchableOpacity>
SUGGESTION:
I will recommend using react-native-paper components as they are modified and can be modified much more than react-native components.
To install;
npm install react-native-paper
Then you can simply import them and use.
More details here Here
Wrap the button component inside a view component and change the styles of the view component, it should work. Please refer to the snippet below
<View style={{width: 150, alignSelf: 'center'}}>
<Button onPress={demoFunction} title="clickMe!!" />
</View>
I know this is necro-posting, but I found a real easy way to just add the margin-top and margin-bottom to the button itself without having to build anything else.
When you create the styles, whether inline or by creating an object to pass, you can do this:
var buttonStyle = {
marginTop: "1px",
marginBottom: "1px"
}
It seems that adding the quotes around the value makes it work. I don't know if this is because it's a later version of React versus what was posted two years ago, but I know that it works now.