We Keep Coding

How to space items in React or React Native

I am trying to space my components however I am having issues. I would like my grid to take up 90% of the screen and the gear icon to take 10%
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{flex: 1}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
</View>
What I have
What I am hoping for
I was able to get the look but I had to change the grid flex value to 12. I know it's not the correct way so I am trying to figure how to do this

You put flex: 1 in both Views, this means that both will try to take up 50% of the space (1+1). If you want one to take 90% and the other one 10%, one will need flex: 9 and the other one flex: 1.
Just change the flex values:
<View style={{flex: 9}}>
<FlatGrid
...
/>
</View>
<View style={{flex: 1}}>
<Icon name="settings" size={30} />
</View>
To try to make it clearer: just imagine the sum of the flex values on the same level are 100%. Since you had 2 flex: 1, 1+1=2=100%, so 1=50%.
By making the change I suggested (flex: 9 and flex: 1) you can think of it like 9+1=10=100%, so 9=90% and 1=10%.

const {width} = Dimensions.get('window');
<View
style={{
paddingLeft: insets.left,
paddingRight: insets.right,
flex: 1,
flexDirection: 'row',
}}
onLayout={event => {
_handleWorkSpace(event);
}}>
<StatusBar hidden={true} />
<View style={{width : 0.9*width}}>
<FlatGrid
itemDimension={96}
// maxDimension={128}
data={items}
style={styles.gridView}
// staticDimension={{width: 128, height: 128}}
fixed
spacing={10}
renderItem={({item}) => (
<View
onLayout={event => {
var {x, y, width, height} = event.nativeEvent.layout;
console.log(width, height);
}}
style={[styles.itemContainer, {backgroundColor: item.code}]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
<View style={{width : 0.1*width}}>
<Icon name="settings" size={30} />
</View>
</View>
try this, don't forget to import Dimensions from react-native
use cosnt {width} = Dimensions.... out of return statement.

You can set your gear icon as an absolute element:
<View style={styles.grid}>
<Octicons name="gear" size={iconSize} color="black" style={styles.icon} />
<FlatGrid
itemDimension={130}
data={items}
style={styles.gridView}
spacing={10}
renderItem={({ item }) => (
<View style={[styles.itemContainer, { backgroundColor: item.code }]}>
<Text style={styles.itemName}>{item.name}</Text>
<Text style={styles.itemCode}>{item.code}</Text>
</View>
)}
/>
</View>
with the following styles:
grid: {
alignSelf: 'center',
width: width * 0.9,
},
icon: {
position: 'absolute',
right: -iconSize,
top: 0,
}
Here is a working snack: https://snack.expo.dev/#hristoeftimov/absolute-icon

How to properly distance two radio buttons or checkboxes in the same row?

I'm a newbie in React Native and I'm working on a form to register an animal for adoption. Some fields are filled by choosing radio buttons and checkboxes, but in order to organize the form's layout I need to distance those elements of the form that are displayed in a row.
I tried to use:
justify-content: 'space around' - which didn't work because the label gets distanced from the button/box;
paddingLeft, paddingRight - kind of worked but as the buttons and boxes have labels with different numbers of characters, I can't get them aligned vertically like in the picture bellow without wasting a lot of time trying to set the correct padding.
Is there an easier way to do this?
Here is my code:
<Text>SEXO</Text>
<View style = {{flexDirection: 'row', alignSelf: "auto"}}>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/>
<Text>Femea</Text>
</View>
<Text>PORTE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={pequenoCheck} onPress={radioPorteHandlerPequeno}/>
<Text style={{paddingRight: 20}}>Pequeno</Text>
<RadioButton checked={medioCheck} onPress={radioPorteHandlerMedio}/>
<Text style={{paddingRight: 20}}>Medio</Text>
<RadioButton checked={grandeCheck} onPress={radioPorteHandlerGrande}/>
<Text>Grande</Text>
</View>
<Text>IDADE</Text>
<View style = {{flexDirection: 'row'}}>
<RadioButton checked={filhoteCheck} onPress={radioIdadeHandlerFilhote}/>
<Text style={{paddingRight: 20}}>Filhote</Text>
<RadioButton checked={adultoCheck} onPress={radioIdadeHandlerAdulto}/>
<Text style={{paddingRight: 20}}>Adulto</Text>
<RadioButton checked={idosoCheck} onPress={radioIdadeHandlerIdoso}/>
<Text>Idoso</Text>
</View>
<Text>TEMPERAMENTO</Text>
<View style={{flexDirection: "row"}}>
<CheckBox style = {{height: 25}}
disabled={false}
value={brincalhao}
onValueChange={(newValue) => setBrincalhao(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Brincalhão</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={timido}
onValueChange={(newValue) => setTimido(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Tímido</Text>
<CheckBox style = {{height: 25}}
disabled={false}
value={calmo}
onValueChange={(newValue) => setCalmo(newValue)}
tintColors={{true: '#000000', false: '#2f3130'}}
/>
<Text>Calmo</Text>
</View>

you could do something like this,
like each item is wrapped in a fragment tag.
<View style = {{flexDirection: 'row', padding:5, justifyContent:"space-between"}}>
<>
<RadioButton checked={machoCheck} onPress={radioSexoHandlerMacho} />
<Text style={{marginRight: 20}}>Macho</Text>
</>
<>
<RadioButton checked={femeaCheck} onPress={radioSexoHandlerFemea}/
<Text>Femea</Text>
</>
</View>

How to get the touchableOpacity function to work correctly?

When I press on "Immunity boosting" the correct Pressedinfo shows up, so its original function works, but the problem is it also alerts citrus, and when I click the touchableOpacity thats supposed to alert Citrus but I don't get any alerts when I'm supposed to, Please check code down below.........................................
export default function LinksScreen() {
const citrusAlert = () => Alert.alert("Citrus ");
const [Pressedinfo, setPressedInfo] = useState(null)
const pressHandler = (id) => {
if (id == 1) {
setPressedInfo(
<View>
<View style={Styles.component}>
<Image source={home} style={Styles.home} />
<Text style={Styles.Text2}>#Stay home, Save lives</Text>
</View>
<View style={Styles.component}>
<Image source={distanceimg} style={Styles.distance} />
<Text style={Styles.Text2}>Keep a safe distance</Text>
</View>
<View style={Styles.component}>
<Image source={washinghands} style={Styles.distance} />
<Text style={Styles.Text2}>Wash hands often</Text>
</View>
<View style={Styles.component}>
<Image source={coverimg} style={Styles.distance} />
<Text style={Styles.Text2}>Cover your cough</Text>
</View>
<View style={Styles.component}>
<Image source={sickimg} style={Styles.distance} />
<Text style={Styles.Text2}>Sick? Call for help</Text>
</View>
</View>
)
} else if (id == 2) {
setPressedInfo(<View>
<TouchableOpacity onPress={citrusAlert()} style={Styles.component}>
<Image source={citrus} style={Styles.distance} />
<Text style={Styles.Text2}>Citrus (Vitamin C)</Text>
</TouchableOpacity>
<View style={Styles.component}>
<Image source={bellp} style={Styles.distance} />
<Text style={Styles.Text2}>Red Bell Peppers</Text>
</View>
<View style={Styles.component}>
<Image source={broc} style={Styles.distance} />
<Text style={Styles.Text2}>Broccoli</Text>
</View>
<View style={Styles.component}>
<Image source={garlic} style={Styles.distance} />
<Text style={Styles.Text2}>Garlic</Text>
</View>
<View style={Styles.component}>
<Image source={ginger} style={Styles.distance} />
<Text style={Styles.Text2}>Ginger</Text>
</View>
<View style={Styles.component}>
<Image source={spinach} style={Styles.distance} />
<Text style={Styles.Text2}>Spinach</Text>
</View>
</View>)
} else if (id == 3) {
setPressedInfo(<View>
<View style={Styles.component}>
<Text style={Styles.Text3}>Stay Home and Call a Health Care Provider</Text>
</View>
</View>)
}
}
return (
<ScrollView style={Styles.scrv} >
<View style={Styles.container} >
<TouchableOpacity onPress={() => pressHandler(1)}>
<View style={Styles.container2}>
<Image source={img5} style={Styles.Hand} />
<Text style={Styles.Text1}> 5 rules of prevention</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(2)}>
<View style={Styles.container2}>
<Image source={food} style={Styles.Hand} />
<Text style={Styles.Text1}>Immunity boosting</Text>
</View>
</TouchableOpacity>
<TouchableOpacity onPress={() => pressHandler(3)}>
<View style={Styles.container2}>
<Image source={sickimg} style={Styles.Hand} />
<Text style={Styles.Text1}>Feeling Sick?</Text>
</View>
</TouchableOpacity>
</View>
{Pressedinfo}
</ScrollView>
)
}

change onPress={citrusAlert()} to onPress={citrusAlert}

How to make a navigation button inside a view with a image and title inside the view React Native

If someone touches the view, there have to be opened a different page. But in this view there is also a image and text. So I have searched for it on the internet, but I couldn't find a good solution.
I have tried to place a button in the view, but it doesn't work.
export default class HomeScreen extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</View>
<View style={[styles.box, styles.box2]}>
<Image
style={styles.image}
source={require('../assets/images/Agenda.png')}
/>
<Text style={styles.white}>Kalender</Text></View>
</View>
<View style={styles.containerbetween}>
<View style={[styles.box, styles.box3]}>
<Image
style={styles.image}
source={require('../assets/images/Analyse.png')}
/>
<Text style={styles.white}>Analyse</Text></View>
<View style={[styles.box, styles.box4]}>
<Image
style={styles.image}
source={require('../assets/images/Tips.png')}
/>
<Text style={styles.white}>Tips en weetjes</Text></View>
</View>
</View>
)
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Use TouchableOpacity:
<TouchableOpacity onPress={()=> {//navigate here}} style={[styles.box, styles.box1]}>
<Image
style={styles.image}
source={require('../assets/images/Pooplog.png')}
/>
<Text style={styles.white}>Poep log</Text>
</TouchableOpacity>

How to use justify content property in react native?

I'm trying to align contents to the left of image.But here what I'm getting is the text will take the left out space after the image.I'm expecting the float-align:left property just as in css to be here.So that I've used alignItems:flex-end.But not getting the output.Is there any possibility of doing this.What I've tried is as below
updated
<ScrollView>
{article.map(a =>
<TouchableOpacity onPress={() =>this.props.navigation.navigate('Article')}>
<CardSection>
<View style={{ flexDirection: 'row'}}>
<Image source={{uri:a.poster}} style={styles.thumbnail_style}/>
<Text style={styles.textStyle}>
{a.title}</Text>
</View>
</CardSection>
</TouchableOpacity>
)}
</ScrollView>
);
}
}
const styles= StyleSheet.create({
thumbnail_style :{
height: 50,
width:50,
},
textStyle:{
paddingTop:20,
fontSize:16,
paddingLeft:10,
marginRight:20
}
});
What I'm getting is as below

Could you explain why you are setting the Image inside your Text?
If you want the image on top of the text simply do:
<Image />
<Text></Text>
otherwise, if you want them placed from left to right you can wrap them in a view and use flexDirection
<View style = {{flexDirection: 'row'}}>
<Text></Text>
<Image />
</View>
<View style = {{flexDirection: 'row'}}>
<Image
style={{height: 100, width: 100}}
source = {{ uri: `https://x1.xingassets.com/assets/frontend_minified/img/users/nobody_m.original.jpg` }}/>
<Text style = {{padding:10, flex: 1, flexWrap: 'wrap'}}>my text</Text>
</View>

I am not sure why you are wrapping Image inside Text. Since you want Image and Text to appear side by side you need it to be siblings. You can have like:
<View>
<Image />
<Text />
</View>
Then you can apply following style to View
{
flexDirection: 'row',
alignItems: 'flex-start'
}