We Keep Coding

How to add dynamic width and color to a view in react native?

I am trying to adjust the width of a view and color according to a variable. I initially declare the variable inside the app which doesnt seem to work. I have also tried declaring the variable outside the function scope but doesnt register. Is there anyway I could dynamically edit the width of the child using the declared variable? Or is there a function that allows me to do this?
const app = () =>{
const childWidth = 50;
const viewColor = 'red'
return(
<View style={styles.parent}>
<View style={styles.child}>CHILD</View>
</View>
)}
styles = styleSheet.create({
parent:{
width: 100,
color: 'white',
},
child:{
width: {childWidth},
color: {viewColor},
}
})
Thanks in advance

I am assuming you want to edit the width dynamically so let's change it using an InputText.
first let's create our useState hook.
const myFunc = () =>{
const [width , setWidth] = useState("50px")
return(
<>
<TextInput onChangeText={setWidth}
value={width} />
//let's assume you want to change the width of this element.
<element style={{width : {width} }}
</>
)
export default ...

i suggest you can use styles in condition
const app = () =>{
const isChildOneStyle = true
return(
<View style={styles.parent}>
<View style={isChildOneStyle ? styles.child1 : styles.child2}>CHILD</View>
</View>
)}
styles = styleSheet.create({
parent:{
width: 100,
color: 'white',
},
child1:{
width: 50,
color: 'red',
},
child2:{
width: 80,
color: 'green',
},
})
or you can overrite style
const app = ({customStyles}) =>{
return(
<View style={styles.parent}>
<View style={[styles.child, customStyles]}>CHILD</View>
</View>
)}
or if you retreived this parameters from api you can do like this
const app = ({customWidth, customColor}) =>{
return(
<View style={styles.parent}>
<View style={[styles.child, { width :customWidth , color: customColor }]}>CHILD</View>
</View>
)}

React Native - cannot import image from path

I have the following basic react native code:
import React from 'react';
import {StyleSheet, View, Image} from 'react-native';
//images
import login_blueGirl from './assets/images/login_blueGirl.png';
const App = () => {
return (
<>
<View style={styles.container}>
<Image source={login_blueGirl}></Image>
</View>
</>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
}
});
export default App;
I'm getting a Cannot find module './assets/images/login_blueGirl.png'. When I type ./ VSCode give me however the autocomplete option:
Any clue on why this is happening?

That's not quite how you're supposed to be importing images, use require instead.
const App = () => {
return (
<View style={styles.container}>
<Image source={require("./assets/images/login_blueGirl.png")} />
</View>
);
};

You can specify the width and height of the image to display it, do this:
const App = () => {
return (
<View style={styles.container}>
<Image style={{ width: 100, height: 80 }} source={require("./assets/images/login_blueGirl.png")}></Image>
</View>
);
};
or
const styles = StyleSheet.create({
imgStyle: {
width: 50,
height: 50,
}
});
const App = () => {
return (
<View style={styles.container}>
<Image style={styles.imgStyle} source={require("./assets/images/login_blueGirl.png")}></Image>
</View>
);
};

To import a static file like a .png file, you can declare
const blueGirl = require("assets/images/login_blueGirl.png");
Then you can use it in an Image component
<Image style={styles.image} source={blueGirl} />
Also the image is used as a self closing tag you don't have to add another </Image> tag.
In order to fully understand how tags and syntax work always check out the official documentation
React Native API

React native styles not combining

I am trying to pass the fontSize as a style property to my component. The fontSize doesnt change any ideas how I can pass the fontSize as a prop to overwrite the default size?
<Homemenu navigation={navigation} style={styles.homeMenu} />
const styles = StyleSheet.create({
....
homeMenu: {
fontSize: 16,
},
});
In my homeMenu:
render() {
let {style, navigation} = this.props;
let fontSize = style && style.fontSize ? style.fontSize : null;
return (
<View style={styles.container}>
<View style={[styles.menuItem, fontSize]}>
....
</View>
const styles = StyleSheet.create({
...
menuItem: {
fontSize: 26
},
});

I guess you are unnecessary bother for falsy values in style prop. I don't see any issue of why it shouldn't work. Code looks good to me.
<Homemenu navigation={navigation} style={styles.homeMenu} />
const styles = StyleSheet.create({
...
homeMenu: {
fontSize: 16,
},
});
render() {
let { style, navigation } = this.props;
return (
<View style={styles.container}>
<View style={[styles.menuItem, style]}>
....
</View>
</View>
);
}
const styles = StyleSheet.create({
...
menuItem: {
fontSize: 26
},
});

You are doing it correct, the only change you need to make in
<View style={[styles.menuItem, fontSize]}>
is you should update the existing style object
style={{...styles.menuItem, fontSize}}
Basically it should be iterable, so that your second value can overrride the first one. And we should not enclose it with square brackets and we should use curly braces, since it is object.

Updating an element of a components style in React Native [duplicate]

This question already has answers here:
Passing Styles Based on Parent Component in React Native
(2 answers)
Closed 5 years ago.
I have a custom component called CardSection
import React from 'react';
import { View } from 'react-native';
const CardSection = (props) => {
return (
<View style={styles.containerStyle}>
{props.children}
</View>
);
};
const styles = {
containerStyle: {
borderBottomWidth: 1,
padding: 5,
backgroundColor: '#fff',
justifyContent: 'flex-start',
flexDirection: 'row',
borderColor: '#ddd',
position: 'relative'
}
};
export { CardSection };
When I instantiate this component from another class I would like to update one of the style elements while the others remain unchanged. The code below will only update the justifyContent element.
<CardSection style={{ justifyContent: 'space-between' }}>
The solution I have at the minute does not seem to be working and I would like to avoid duplicating the element with just a change to one of the style elements.

You could do the following:
//destruct props
const CardSection = ({ style, children }) => {
return (
// prop 'style' overrides standard containerStyle
<View style={[styles.containerStyle, style]}>
{children}
</View>
);
};

You can merge styles if you pass an array to styles:
const CardSection = (props) => {
return (
<View style={[styles.containerStyle, props.style]}>
{props.children}
</View>
);
};
They 'cascade' from left to right, meaning that latter styles in the array overwrite the former.
Here is the documentation for styling in react-native by default.

React-native duplicating css class names

I'm trying to understand the best practice for naming component styles in react-native. I understand that style-sheets are scoped at component level but I want to understand if i have two different components whether its bad to use the same css class name for different styles in different components. For example:
component one:
render() {
return (
<View style={styles.container}>
</View>
)
}
const componentOneStyles = StyleSheet.create({
container: {
backgroundColor: 'red'
}
});
component two:
render() {
return (
<View style={styles.container}>
</View>
)
}
const componentTwoStyles = StyleSheet.create({
container: {
backgroundColor: 'green'
}
});
Given this example is it ok to use container for both these components or would it be better practice to use containerOne and containerTwo.