I am learning React Native programming for Android mobile apps. I am making a screen where I need to set height of button. I have added button in view and set the height of using style however there is no change on button height.
/**
* LoginComponent of Myntra
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import { AppRegistry, Text, View, Button, TextInput } from "react-native";
class LoginComponent extends Component {
render() {
return (
<View style={{ flex: 1, flexDirection: "column", margin: 10 }}>
<TextInput
style={{
height: 40,
borderColor: "gray",
borderWidth: 0.5
}}
placeholder="Email address"
underlineColorAndroid="transparent"
/>
<TextInput
style={{
height: 40,
borderColor: "gray",
borderWidth: 0.5
}}
placeholder="Password"
secureTextEntry={true}
underlineColorAndroid="transparent"
/>
<View style={{ height: 100, marginTop: 10 }}>
<Button title="LOG IN" color="#2E8B57" />
</View>
</View>
);
}
}
AppRegistry.registerComponent("Myntra", () => LoginComponent);
Can anyone help me to set the height of button according to my requirement?
This component has limited options, so you can't resize it to a fixed height.
I recommend you to use the TouchableOpacity component to build your own button, with own properties and styles.
You can easily style it like this:
<TouchableOpacity style={{ height: 100, marginTop: 10 }}>
<Text>My button</Text>
</TouchableOpacity>
You can set the button width as per the mentioned width easily by using following method :
<View style={[{ width: "90%", margin: 10, backgroundColor: "red" }]}>
<Button
onPress={this.buttonClickListener}
title="Button Three"
color="#FF3D00"
/>
</View>
Best solution is to use minHeight or maxHeight instead of using Height const.
It often happens that we want to change the dimensions of the button, which by default is extended to the entire width of the parent element. While reducing its width is not a problem – it is enough to reduce the width of the parent, but changing the height is already problematic. The Button element has no style property, so apart from changing the text color on iOS and the background color on Android, we can not set much in it.
To have more control over the button, it is better to use TouchableOpacity or TouchableNativeFeedback instead.
TouchableOpacity Function Component Example -
import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
const App = () => {
const [count, setCount] = useState(0);
const onPress = () => setCount(prevCount => prevCount + 1);
return (
<View style={styles.container}>
<View style={styles.countContainer}>
<Text>Count: {count}</Text>
</View>
<TouchableOpacity
style={styles.button}
onPress={onPress}
>
<Text>Press Here</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
paddingHorizontal: 10
},
button: {
alignItems: "center",
backgroundColor: "#DDDDDD",
padding: 10
},
countContainer: {
alignItems: "center",
padding: 10
}
});
export default App;
<View style={styles.btnContainer}>
<TouchableOpacity>
<Button style={styles.btnSize}>
<Text>Change Address</Text>
</Button>
</TouchableOpacity>
<TouchableOpacity>
<Button style={styles.btnSize}>
<Text>Change Address</Text>
</Button>
</TouchableOpacity>
</View>
Style sheet code snippet
const styles = StyleSheet.create({
btnContainer:{
flexDirection:"row",
justifyContent:"space-between"
},
btnSize:{
width:"100%"
}
})
The component Button supports a minimal level of customization, so you have to use an other component.
You can use : Pressable or TouchableOpacity ,
<Pressable onPress={onPressFunction} style={styles.yourButtonStyle}>
<Text>I'm pressable!</Text>
</Pressable
const styles = StyleSheet.create({
yourButtonStyle: {
...
}
});
Doc Button
Related
Currently, I'm getting the page this way after pressing on text input (notice there's no header, since it's popped out of the screen):
I want it to be like this (even if I press on text input, HEADER should remain in the same position):
I'm using this in the android manifest:
android:windowSoftInputMode="adjustPan"
Here's my code:
import React from 'react';
import {
View,
Dimensions,
TextInput,
ScrollView,
StatusBar,
Text,
KeyboardAvoidingView,
} from 'react-native';
const {width, height} = Dimensions.get('window');
const Conversation = ({}) => {
return (
<>
<StatusBar hidden />
<View
style={{
backgroundColor: 'gray',
height: 50,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text center style={{color: 'white'}}>
Header
</Text>
</View>
<KeyboardAvoidingView behavior="padding" style={{flex:1}}>
<TextInput
style={{
backgroundColor: 'white',
borderWidth: 1,
height: 50,
marginHorizontal: width * 0.1,
top: height * 0.9,
}}
/>
</KeyboardAvoidingView>
</>
);
};
export default Conversation;
You just need to remove top: height * 0.9 and place your content inside ScrollView.
import React from 'react';
import {
View,
Dimensions,
TextInput,
ScrollView,
StatusBar,
Text,
FlatList,
KeyboardAvoidingView,
} from 'react-native';
const { width, height } = Dimensions.get('window');
const Conversation = ({ }) => {
return (
<>
<StatusBar hidden />
<View
style={{
backgroundColor: 'gray',
height: 50,
justifyContent: 'center',
alignItems: 'center',
}}>
<Text center style={{ color: 'white' }}>
Header
</Text>
</View>
<KeyboardAvoidingView behavior="padding" style={{ flex: 1 }}>
<ScrollView>
</ScrollView>
<TextInput
style={{
backgroundColor: 'white',
borderWidth: 1,
height: 50,
marginHorizontal: width * 0.1
}}
/>
</KeyboardAvoidingView>
</>
);
};
export default Conversation
Below is the code for my component. Problem is that I cannot add any space in between the buttons, only on Android emulator as you can see in the image. Right now you see marginBottom but if I replace it with padding, it still does not work.
Appreciate if anyone has an idea why is this happening.
import React from 'react';
import { StyleSheet, View} from 'react-native';
import { Button } from 'react-native-elements';
const HomeScreen = ({navigation}) => {
return(
<View style={styles.container}>
<View>
<Button title="Sign In" onPress={() => navigation.navigate('SignIn')} style={{ marginBottom: 20}}/>
<Button title="Sign Up" onPress={() => navigation.navigate('SignUp')} />
</View>
</View>
)
}
HomeScreen.navigationOptions = () => {
return {
header: () => false
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingLeft: 20,
paddingRight: 20,
paddingTop: 40,
backgroundColor: 'white'
}
});
export default HomeScreen;
As I can understand you are using react-native-elements, and style prop is not vailable on that component, I can see on the documentation try using this prop "buttonStyle" to style the button and if not possible wrap the button around a view,
Thanks
import React, { Component } from 'react';
import { Alert, Button, TextInput, View, StyleSheet, Text, AsyncStorage } from 'react-native';
import { DrawerItems, DrawerNavigation } from 'react-navigation';
export default class Home extends Component {
const DrawerContent = (props) => (
<View>
<View
style={{
backgroundColor: '#f50057',
height: 140,
alignItems: 'center',
justifyContent: 'center',
}}
>
<Text style={{ color: 'white', fontSize: 30 }}>
Header
</Text>
</View>
<DrawerItems {...props} />
</View>
)
const Navigation = DrawerNavigator({
// ... your screens
Home:{
screen: HomeScreen,
},
Settings: {
screen: SettingsScreen,
},
}, {
// define customComponent here
contentComponent: DrawerContent,
})
render() {
return (
<View>
<Text>Welcome To Home</Text>
</View>
);
}
}
I am designing a screen which will be a home screen for my app. This screen will have navigation drawer like in Android and the drawer header will contain an image and a text label inside it and below that there will be drawer items from which i will navigate to a different screen. I have tried to achieve this using the above code but it doesn't work. Can you tell me where i am wrong? How can i achieve my target? I am a newbie to react native so i please make my concepts clear
Please replace your DrawerContent with the following code and check if it works.
const DrawerContent = (props) => {
return (
<SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
<View style={{ flexDirection: 'row', paddingBottom: 20 }}>
<View style={{ flex: 80, backgroundColor: '#f50057'}}>
<Image style={{ width: 181, height: 132}} source={images.logo} />
</View>
<Text style={{ color: '#000', fontSize: 30 }}>Header</Text>
</View>
<DrawerItems {...props}/>
</SafeAreaView>
)};
First create Drawer Component
export default class DrawerComponent extends React.Component {
render() {
return (
<SafeAreaView style={{ flex: 1 }}>
<ScrollView>
<View style={{ backgroundColor: "white" }}>
<Image
style={{ margin: 15 }}
source={{uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png'}}
/>
</View>
<DrawerItems {...this.props} />
</ScrollView>
</SafeAreaView>
);
}
}
and import the component in your Home.js
import DrawerComponent from "./path/to/drawerComponent";
Please note : ScrollView is necessary for the case when you have more items to show ex: 7+ items (with margins in style prop) and also when screen height is small
I tried react-native on Button which is working fine. I want to customize Button so this made me to go for TouchableOpacity. I am trying to setup react native navigation like below which is not working now.
I am using this for navigation https://reactnavigation.org/
index.android.js
/**
* https://github.com/facebook/react-native
* #flow
*/
import React, { Component } from "react";
import {
AppRegistry,
Image,
View,
Text,
Button,
StyleSheet,
TouchableOpacity
} from "react-native";
import { StackNavigator } from "react-navigation";
import EnableNotificationScreen from "./EnableNotificationScreen";
import styles from "./Styles";
import * as strings from "./Strings";
class SplashScreen extends Component {
render() {
console.disableYellowBox = true;
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Image source={require("./img/talk_people.png")} />
<Text style={styles.textStyle}> {strings.talk_people} </Text>
<TouchableOpacity>
<View
style={{
backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240,
marginTop: 30,
height: 40
}}
onPress={() => {
this.navigate("EnableNotifcation");
}}
>
<Text style={{ color: "white" }}>CONTINUE</Text>
</View>
</TouchableOpacity>
</View>
);
}
}
const ScheduledApp = StackNavigator(
{
Splash: {
screen: SplashScreen,
navigationOptions: {
header: {
visible: false
}
}
},
EnableNotification: {
screen: EnableNotificationScreen,
navigationOptions: {
header: {
visible: false
}
}
}
},
{
initialRouteName: "Splash"
}
);
AppRegistry.registerComponent("Scheduled", () => ScheduledApp);
It was a tpyo error at this line this.navigate("EnableNotifcation");
I corrected it and it is working now. this.navigate("EnableNotification");
The onPress prop should be inside TouchableOpacity, not inside of the View props like you have it. See the pseudo code below
<TouchableOpacity onPress = {...}>
<View style = {{}}>
//Rest of the code
This should fix it. On a sidenote, i would recommend adding a new style for your view component, theres a lot of elements in there :P
Edit:
<TouchableOpacity onPress = {/*do this*/}>
<View style={{ backgroundColor: "#FE434C",
alignItems: "center",
justifyContent: "center",
borderRadius: 10,
width: 240, marginTop: 30,
height: 40 }}>
<Text style={{ color: "white" }}>
{"CONTINUE"}
</Text>
</View>
</TouchableOpacity>
Using following worked for me. using react native 0.62.2. See TouchableOpacity is inside KeyboardAvoidingView and ScrollView keyboardShouldPersistTaps.
<ScrollView keyboardShouldPersistTaps="handled">
<KeyboardAvoidingView enabled>
<View>
<TouchableOpacity
onPress={() => functionNameToNavigate('ScreenToMoveOn')}> <Text>Click me</text>
</TouchableOpacity>
</View>
</KeyboardAvoidingView>
</ScrollView>
I am trying to make my application button in react-native like below
I am using inbuilt Button view of react native where I see that it does not allow to change the height also. I want to change the height as well rounded like expected image.
This is how my button is looking :
<Button
title="CONTINUE"
color="#FE434C"
onPress={() => navigate("EnableNotification")}
/>
So this is what I usually do:
<TouchableOpacity onPress={() => {/* do this */}}>
<View style={{
backgroundColor: 'red',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15
}}
>
<Text style={{ color: 'white' }}>Button</Text>
</View>
</TouchableOpacity>
I find using this method makes buttons much more customisable, but if you do some digging there could be a library which implements something similar (I never really found the need to search for it).
NOTE: Obviously you will have to adjust the height/width of the button to your flavor.
EDIT: My mistake... I had put the onPress prop in the view, woops.
Here is my solution to easily style buttons using TouchableOpacity, Text and StyleSheet:
import React, { Component } from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from "react-native";
export default class CustomButton extends Component {
render(){
return (
<View style={styles.container}>
/* Custom Button */
<TouchableOpacity
style={styles.customBtnBG}
onPress={() => {}} >
<Text style={styles.customBtnText}>Button</Text>
</TouchableOpacity>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center"
},
/* Here, style the text of your button */
customBtnText: {
fontSize: 40,
fontWeight: '400',
color: "#fff",
},
/* Here, style the background of your button */
customBtnBG: {
backgroundColor: "#007aff",
paddingHorizontal: 30,
paddingVertical: 5,
borderRadius: 30
}
});
#Ryan Turnbull, Well, i think a little padding and fontSize will do.
<TouchableOpacity onPress={() => this.onLogin()}>
<View
style={{
backgroundColor: 'black',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 15,
padding: 15,
}}>
<Text style={{color: 'white', fontSize: 20, fontWeight: '800'}}>
Button
</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress = {() => {/* do this */}}>
<View style = {{backgroundColor: 'red', alignItems: 'center',
justifyContent: 'center', borderRadius: 15}}
>
<Text style = {{color: 'white'}}>Button</Text>
</View>
You can use Touchable Opacity and it's prop border radius to adjust it's curve.
https://facebook.github.io/react-native/docs/touchableopacity
In React-native, we can customise user defined button component and call it from anywhere. So that we can have structured approach throughout the program or application.
import React from "react";
import { StyleSheet, TouchableOpacity, Text, View } from "react-native";
const MyButton = props => {
return (
<TouchableOpacity
onPress={props.onPress}
>
<View style={{...styles.buttonStyle, ...props.style,
backgroundColor:props.buttonColor,
borderColor:props.buttonColor}}>
<Text style={{...styles.TextStyle, ...props.style,
color:props.fontColor}}>
{props.children}
</Text>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
buttonStyle: {
paddingVertical: 10,
paddingHorizontal: 10,
borderRadius: 10,
borderWidth: 2,
},
TextStyle: {
textAlign: "center",
},
});
export default MyButton;
In style ... spread operator is used to integrate all the styles from same components and incoming styles from parent component through props.
props.children is used here to pass button title, so that title text is displayed on the button.
When button is pressed then instead of handling this press event inside of the button but inside of the component where we use this button. So we pass a fitting function reference on the button.
This MyButton button component can be called anywhere inside the program like:
<MyButton onPress={() => onPressFunction()}
buttonColor="red" fontColor="white">Button Title</MyButton>
You can use this library https://github.com/APSL/react-native-button to create a customizable button in react native.
<View>
<Button
style={{
backgroundColor: "#FE434C",
borderColor: "transparent",
borderRadius: 20,
width: 250,
height: 50,
}}
textStyle={{ color: "#FFFFFF" }}
onPress={() => { }}
>
CONTINUE
</Button>
</View>