We Keep Coding

How to change the style with props

How to change the style in React Native?
I need to change the color of the text when it is true or false
here is my code:
Styles Area
LIVE:{
color: "red"
},
Comp: {
color: "green"
},
Main
<Text style={MyCardStyle.AnyText}>{isLive == false ? /* MyCardStyle.Comp */ : /* MyCardStyle.LIVE */ }</Text>
// The commented out codes have error as "Objects are not valid as a React child"
Props
<MyMatchCard
isLive={true}
/>
Here i want to change the color of the Text to green when its false or red when its true
How to actually apply the color without getting an error?

One way to do it is to change the style object to function instead. That function will take a parameter that will be used to define the text color:
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants'
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
const MyText = ({isLive}) => {
return (
<Text style={styles.text(isLive)}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
)
}
export default function App() {
return (
<View style={styles.container}>
<MyText isLive />
<MyText />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
text: (isLive) => ({
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
color: isLive ? 'green' : 'black'
}),
});

You can also pass the condition to the style prop
const MyText = ({isLive}) => {
return (
<Text style={{color: isLive? 'green' : 'red' }}>
Your text
</Text>
)
}

Unable to align text in React Native

I am new to React Native. I have created a login page with it. I want to know how I can align the Login text on the left side instead of showing it in the center.
My code:
Login.js
import React from 'react';
import { View, Text, StyleSheet, TextInput, TouchableOpacity } from 'react-native';
const Login = () => {
return (
<View style={styles.container}>
<Text style={styles.head}>
Login
</Text>
<TextInput placeholder="Username" style={styles.input}/>
<TextInput placeholder="Password" style={styles.input}/>
<TouchableOpacity style={styles.button}>
<Text style={styles.textStyle}>LOGIN</Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor:'white'
},
head:{
alignItems:'flex-start',
fontWeight:'bold',
fontSize:30,
marginBottom:15
},
input:{
height:50,
borderRadius:5,
backgroundColor:'#ededed',
alignSelf:'stretch',
marginLeft:15,
marginRight:15,
marginBottom:8,
paddingLeft:15
},
button:{
backgroundColor:'#e57373',
alignSelf:'stretch',
borderRadius:5,
marginLeft:15,
marginRight:15,
alignItems:'center',
padding: 15,
},
textStyle:{
fontWeight:'bold',
color:'white'
}
});
export default Login;
Let me know what I am doing wrong in the code above.

alignItems is concerned with the children of the parent container, while alignSelf deals with the element itself.
head:{
alignSelf:'flex-start',
// ...other styles
}

I can't test it right now, but it should be something like this:
Add the alignSelf and textAlign attributes to your head-styles.
head: {
alignItems: 'flex-start',
alignSelf: 'stretch',
fontWeight: 'bold',
fontSize: 30,
marginBottom: 15,
textAlign: 'left'
},

Style object is not applied in Component

I have this Component
import React from 'react';
import PropTypes from 'prop-types';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
const styles = StyleSheet.create({
container: {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
width: 50,
height: 50,
borderRadius: 25,
},
button: {
alignItems: 'center',
justifyContent: 'center',
backgroundColor: 'white',
borderRadius: 20,
height: 40,
width: 40,
},
});
const Button = ({
children = 'NO CONTENT HERE',
color = 'red',
onPress,
style = {},
}) => {
return <View
style={styles.container}>
<TouchableOpacity
style={[{ backgroundColor: color }, styles.button, style]}
onPress={onPress}>
{children}
</TouchableOpacity>
</View>
}
Button.propTypes = {
color: PropTypes.string,
onPress: PropTypes.func,
style: PropTypes.object
}
export default Button;
I use the Component <Button /> and do not pass a color prop to it. I expect the <Button /> to become red. However, it is white. When I pass a color prop, lets say green, it does not work neither. However, when I add a backgroundColor to the StyleSheet.button it gets applied. Why is that?

You need to change the order in which you apply the styles.
Try changing it to
<TouchableOpacity
style={[styles.button, style, { backgroundColor: color }]}
onPress={onPress}>
When you pass in multiple values with the same key, the last value is the one that gets used.

In React-Native, color props for Button works based on the mobile platform whether it’s an iOS or Android. When we pass color prop to a button, it changes the text color in iOS and a background-color in Android. So, it’s better to not rely on this prop for your requirement.
You may check the official React-Native documentation for button here-
https://reactnative.dev/docs/button
I would suggest to use a separate class to apply color to the button.

how to put icon inside my 'box' in react native?

I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
I have build a 'box' that contain my style to the components, I have manage to put there only text but no success with icon/image plz help
App:
.....import Box from './src/box';
......
<View style={{height: 100,flexDirection:'row',flex:1}}>
<Box someText={'sushi'}
//, background source={require('./assets/sushi.png')}
//,TouchableHighlight onPress={this.message_function}
/>
</View>
box:
import { StyleSheet, Dimensions, Text,View ,Image} from "react-native";
import React from 'react' ;
export default class Box extends React.Component {
render() {
return (
<View style={styles.box}>
<Text style={styles.paragraph}> {this.props.someText}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
box: {
flex: 1,
height: 100,
//backgroundColor: '#ccc',
margin: 8,
},
paragraph: {
//margin: 24,
fontSize: 15,
textAlignVertical:10,
fontWeight: 'bold',
textAlign: 'center',
textAlignVertical: 'bottom',
//top:0, left: 0, right: 0,
color: '#000',
width: '100%',
height: '70%',
backgroundColor: 'rgba(255,255,255,0.8)'
}
});

You can wrap an <Image> or Icon component within your box <View>
So it will end up something like this:
<View style={styles.box}>
<Image source={require('your-image-path')} />
</View>
Image component docs: https://facebook.github.io/react-native/docs/image.html
There are several libs to handle Icon component:
React Native Elements: https://react-native-training.github.io/react-native-elements/docs/icon.html
import { Icon } from 'react-native-elements'
<Icon name='rowing' />
React Native Vector Icons: https://github.com/oblador/react-native-vector-icons
import Icon from 'react-native-vector-icons/MaterialIcons';
<Icon name="user" />
React Native Icons: https://github.com/corymsmith/react-native-icons
import Icon from 'react-native-icons';
<Icon
name='ion|beer'
size={40}
color='#887700'
/>
Hope it helps

How to change background color of react native button

I am trying to change the background color of my button but nothing seems to work, I tried the raised property, maybe i am using it incorrectly. Do any of you have any ideas?
import React from 'react';
import { StyleSheet, Text, View, Button, TouchableHighlight } from 'react-native';
export default class App extends React.Component {
state={
name: "Mamadou"
};
myPress = () => {
this.setState({
name: "Coulibaly"
});
};
render() {
return (
<View style={styles.container}>
<Button
title={this.state.name}
color="red"
onPress={this.myPress}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Use this for adding the background color to the button in iOS:
Styles:
loginScreenButton:{
marginRight:40,
marginLeft:40,
marginTop:10,
paddingTop:10,
paddingBottom:10,
backgroundColor:'#1E6738',
borderRadius:10,
borderWidth: 1,
borderColor: '#fff'
},
loginText:{
color:'#fff',
textAlign:'center',
paddingLeft : 10,
paddingRight : 10
}
Button:
<TouchableOpacity
style={styles.loginScreenButton}
onPress={() => navigate('HomeScreen')}
underlayColor='#fff'>
<Text style={styles.loginText}>Login</Text>
</TouchableOpacity>
For Android it simply works with Button color property only:
<Button onPress={onPressAction} title="Login" color="#1E6738" accessibilityLabel="Learn more about this button" />

I suggest to use React Native Elements package, which allow to insert styles throught buttonStyle property.
styles:
const styles = StyleSheet.create({
container: {
flex: 1
},
button: {
backgroundColor: '#00aeef',
borderColor: 'red',
borderWidth: 5,
borderRadius: 15
}
})
render()
render() {
return (
<View style={styles.container}>
<Button
buttonStyle={styles.button}
title="Example"
onPress={() => {}}/>
</View>
)
}
Effect:
Expo Snack: https://snack.expo.io/Bk3zI0u0G

"color" property applies to background only if you're building for android.
Other than that I personally find it easier to manage custom buttons. That is create your own component named button and have it as a view with text. This way its way more manageable and you can import it as easy as Button.

this answer is little bit late, but can be good for anothers.
To solve this problem it is better to use "Text" Component as a Button
fist make a component name it AppButton
function AppButton({children,style,onPress}) {
return (
<TouchableOpacity onPress={onPress}>
<Text
style={[styles.appButton,style]} >
{children}
</Text>
</TouchableOpacity>
);
}
export default AppButton;
then Import it in where that you want to use it
import AppButton from './AppButton';
and with this line you can call your custom Button that actually is a Text which you can customize it.
remember onPress Event have to calling in TouchableOpacity not Text:
<AppButton style={styles.appOk} onPress={()=> visibleFunc(false)} >Ok</AppButton>

Maybe Pressable is what you're looking for; it allows you to add style to a pressable component (like a button).Read more here
Sample code:
import React from 'react';
import { Text, View, StyleSheet, Pressable } from 'react-native';
export default function Button(props) {
const { onPress, title = 'Save' } = props;
return (
<Pressable style={styles.button} onPress={onPress}>
<Text style={styles.text}>{title}</Text>
</Pressable>
);
}
const styles = StyleSheet.create({
button: {
alignItems: 'center',
justifyContent: 'center',
paddingVertical: 12,
paddingHorizontal: 32,
borderRadius: 4,
elevation: 3,
backgroundColor: 'black',
},
text: {
fontSize: 16,
lineHeight: 21,
fontWeight: 'bold',
letterSpacing: 0.25,
color: 'white',
},
});

You should use the hex code backgroundColor="#FF0000" instead of color="red". Also please use raised={true} other wise background color is not override.