We Keep Coding

React Native - How to get same output in two different pages in react-native with same code?

(React native )
Here is my code for one screen(DetailsScreen) and I want to make other screen(IngredientScreen) with same output how to do that. when I tried to copy the same code in IngredientScreen I am getting some error. what kinds of modification do I need in DetailsScreen and what kinds of code need to be added in IngredientScreen. page need to be navigate from DetailsScreen to IngredientScreen. (react native )
Codes are here :-
import React from "react";
import { SafeAreaView, StyleSheet, View, Text, Image } from "react-native";
import { ScrollView, TouchableOpacity } from "react-native-gesture-handler";
import Icon from "react-native-vector-icons/MaterialIcons";
import COLORS from "../../consts/colors";
import foods from "../../consts/foods";
import { SecondaryButton } from "../components/Button";
const DetailsScreen = ({ navigation, route }) => {
const item = route.params;
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
};
const style = StyleSheet.create({
header: {
paddingVertical: 20,
flexDirection: "row",
alignItems: "center",
marginHorizontal: 20,
},
details: {
paddingHorizontal: 20,
paddingTop: 40,
paddingBottom: 60,
backgroundColor: COLORS.primary,
borderTopRightRadius: 40,
borderTopLeftRadius: 40,
},
iconContainer: {
backgroundColor: COLORS.white,
height: 50,
width: 50,
justifyContent: "center",
alignItems: "center",
borderRadius: 30,
},
detailsText: {
marginTop: 10,
lineHeight: 22,
fontSize: 16,
color: COLORS.white,
},
});
export default DetailsScreen;

You could create a new component and then import it in both screens. For example:
const DetailScreen = () => {
return <ReusableComponent />
}
const Ingredientcreen = () => {
return <ReusableComponent />
}
export const ReusableComponent = () => {
return (
<SafeAreaView style={{ backgroundColor: COLORS.white }}>
<View style={style.header}>
<Icon name="arrow-back-ios" size={28} onPress={navigation.goBack} />
<Text style={{ fontSize: 20, fontWeight: "bold" }}>Details</Text>
</View>
<ScrollView showsVerticalScrollIndicator={false}>
<View
style={{
justifyContent: "center",
alignItems: "center",
height: 280,
}}
>
<Image source={item.image} style={{ height: 220, width: 220 }} />
</View>
<View style={style.details}>
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
}}
>
<Text
style={{ fontSize: 25, fontWeight: "bold", color: COLORS.white }}
>
{item.name}
</Text>
</View>
<Text style={style.detailsText}>{item.details}</Text>
<View style={{ marginTop: 40, marginBottom: 40, color: "red" }}>
<TouchableOpacity
onPress={() => navigation.navigate("IngredientScreen")}
>
<SecondaryButton title="Ingredients..." />
</TouchableOpacity>
</View>
</View>
</ScrollView>
</SafeAreaView>
);
}

React Native Styling & Flex -- Centering A Component

I'm having incredible difficulty figuring out why my stylesheet isn't working the way that I want it to -- I want both the icon [note the comments] as well as the button on the bottom to appear centered, but both currently appear left-aligned. Would be grateful for any + all direction.
Here are my imports:
import { useNavigation } from '#react-navigation/native';
import React from 'react';
import {
Text,
SafeAreaView,
ScrollView,
View,
TouchableOpacity,
ActivityIndicator,
Alert
} from 'react-native';
import { withNavigation } from 'react-navigation';
import { firebase } from '../../../../firebase/config';
import styles from './styles';
import DateTimePicker from '#react-native-community/datetimepicker';
import { Sae } from 'react-native-textinput-effects';
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import { FontAwesome } from '#expo/vector-icons'
Here is the code returned from my class component:
<SafeAreaView style={styles.container}>
<ScrollView>
<View style={styles.inputContainer}>
<View>
<Text style={styles.title}>Create An Event</Text>
</View>
<Sae
style={{marginLeft: 10, marginRight: 10, marginBottom: 10}}
labelStyle={{color: '#656565'}}
label={'Event Name'}
iconClass={FontAwesomeIcon}
iconName={'calendar-check-o'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<Sae
style={{marginLeft: 10, marginRight: 10}}
labelStyle={{color: '#656565'}}
inputStyle={{fontSize: 16}}
label={'Event Description'}
iconClass={FontAwesomeIcon}
iconName={'pencil'}
iconColor={'#e95530'}
inputPadding={16}
labelHeight={20}
borderHeight={2}
autoCapitalize={'none'}
autoCorrect={false}
/>
<View style={styles.break1}></View>
<View style={styles.break2}><FontAwesome name='circle' color='#e6a80c'/></View> //would like this icon to be centered
<View style={styles.break3}></View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Date </Text>
<DateTimePicker
testID='datePicker'
value={this.state.date}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Select a date'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Start Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventStartTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChange}
placeholder='Start time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>End Time </Text>
<DateTimePicker
testID='timePicker'
value={this.state.eventEndTime}
mode='time'
is24Hour={true}
display='default'
onChange={this.onChangeEventEndTime}
placeholder='End time'
style={{ marginHorizontal: 10 }}
/>
</View>
<View style={styles.indInputContainer}>
<Text style={styles.text}>Guests' Votes Due By </Text>
<DateTimePicker
testID='datePicker'
value={this.state.votingDeadline}
mode='date'
is24Hour={true}
display='default'
onChange={this.onChangeVotingDeadline}
placeholder='Votes Due By'
style={{ marginHorizontal: 10 }}
/>
</View>
</View>
<View style={styles.buttonContainer}> //would like this button to appear centered also
<TouchableOpacity
style={styles.button}
onPress={() => this.storeEvent()}
>
<Text style={styles.Btn}>Create Event</Text>
</TouchableOpacity>
</View>
</ScrollView>
</SafeAreaView>
And here is the stylesheet:
export default StyleSheet.create({
container: {
backgroundColor: '#ffffff',
flex: 1,
justifyContent: 'center'
},
inputContainer: {
padding: 10
},
indInputContainer: {
margin: 8
},
break1: {
marginBottom: 20,
marginTop: 20
},
break2: {
alignContent: 'center',
justifyContent: 'center'
},
break3: {
marginTop: 10,
marginBottom: 10
},
text: {
fontSize: 16,
color: '#656565',
},
preferences: {
fontWeight: 'bold',
fontSize: 20,
margin: 5,
},
title: {
padding: 5,
fontSize: 16,
fontWeight: 'bold',
color: '#e95530'
},
buttonContainer: {
justifyContent: 'center',
alignContent: 'center'
},
button: {
backgroundColor: '#e95531',
margin: 10,
marginTop: 20,
height: 48,
borderRadius: 5,
alignItems: 'center',
justifyContent: 'center',
width: 275,
},
Btn: {
color: 'white',
fontSize: 16,
fontWeight: 'bold',
},
preloader: {
left: 0,
right: 0,
top: 0,
bottom: 0,
position: 'absolute',
alignItems: 'center',
justifyContent: 'center',
},
});
Would be super grateful for some help. Thank you!

React native view to next line?

Iam creating a react native project in which am displaying multiple views in a row and after certain width, it needs to go to next line ! But its not going, how to do that ?
Actual Output:
word1 word-word2 word-word-word3 word-word-word4
Expected Outpu:
word1 word-word2 word-word-word3
word-word-word4
This is my code:
<View style={{ flexDirection :'row', marginHorizontal: 10, paddingTop: 7,
paddingBottom: 7, width: 150 }}>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 } }>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
This is my expo "Check this"
Please suggest !

Give parent View of Text components flexWrap:"wrap" style:
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
Full Example:
import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Constants from 'expo-constants';
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App() {
return (
<View style={styles.container}>
<View style={{ backgroundColor: '#eff3f8' }}>
<View
style={{
flexDirection: 'row',
marginHorizontal: 10,
paddingTop: 7,
paddingBottom: 7,
width: Constants.width * 0.3,
flexWrap: 'wrap'
}}>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word1</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word2</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word3</Text>
</View>
<View style={{ paddingRight: 10 }}>
<Text style={{ fontSize: 12 }}>word-word-word4</Text>
</View>
</View>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
});
Working App : Expo Snack

How to set keyboard off at beginning on React Native

My app at first opening direct a login page and keyboard open automaticly! But what i want is keyboard off position at beginning but when clicking any input must be keyboard on.Here is my login.js page
import React, { Component } from 'react';
import { Formik } from 'formik';
import * as Yup from 'yup';
import Axios from 'axios';
import AsyncStorage from '#react-native-community/async-storage';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
Image,
ActivityIndicator,
} from 'react-native';
import { Container, Header, Content, Form, Item, Input, Button } from 'native-base';
import { set } from 'react-native-reanimated';
export default class Login extends Component {
render() {
return (
<ScrollView contentInsetAdjustmentBehavior="automatic" >
<View style={styles.containerx}>
<Container style={styles.bigContainer} >
<Content contentContainerStyle={{ flex: 1, justifyContent: 'center', padding: 30 }}>
<Image
source={ require('../assets/icon1024.png') }
style={{ width: 150, height: 150, alignSelf: 'center', marginBottom: 10 }}
/>
<Text style={styles.loginText}>KUŞ SOR</Text>
<Text style={[styles.loginText, { fontSize: 14 }]} >Birdpx Kuş Tanımlama Platformu</Text>
{
this.state.loading == true ? <View style={styles.emptyCont}><ActivityIndicator size='large' color='white' /></View> :
<Formik
initialValues={{username: '', password: ''}}
onSubmit={this._handleSubmit}
validationSchema={
Yup.object().shape({
password: Yup.string().min(6, 'Minimim 6 Karakter').required('Bu Alan Zorunludur'),
username: Yup.string().required('Bu Alan Zorunludur'),
})
}
>
{({ handleChange, handleBlur, handleSubmit, values, errors }) => (
<Form>
<Item>
<Input
onChangeText={handleChange('username')}
onBlur={handleBlur('username')}
placeholder="Kullanıcı Adı"
style={{ color: 'white' }}
autoCapitalize={'none'}
value={values.username}
autoFocus={true}
/>
<Text style={styles.errorStyle}>{errors.username}</Text>
</Item>
<Item>
<Input
onChangeText={handleChange('password')}
onBlur={handleBlur('password')}
style={{ color: 'white' }}
secureTextEntry={true}
placeholder="Şifre"
value={values.password} />
<Text style={styles.errorStyle}>{errors.password}</Text>
</Item>
<Button style={{ alignSelf: 'center', marginTop: 20, padding: 10 }} warning
block
onPress={handleSubmit}
>
<Text style={{ textAlign: 'center', justifyContent: 'center' }} > GİRİŞ YAP </Text>
</Button>
<View>
<Text
style={{ textAlign: 'center', justifyContent: 'center', color: '#999', marginTop: 150 }}
onPress={() => this.props.navigation.navigate('FSignup')}
>Henüz üye değilseniz. Buradan Kayıt Olun</Text>
</View>
</Form>
)}
</Formik>
}
</Content>
</Container>
</View>
</ScrollView>
);
};
};
const styles = StyleSheet.create({
bigContainer: {
backgroundColor: 'black',
flex: 1,
},
containerx: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
width:'100%'
},
loginText: {
color: '#c79816',
fontSize: 20,
alignSelf: 'center',
margin: 7,
fontWeight: "700"
},
emptyCont: {
flex: 1,
height: 100,
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center'
},
errorStyle: {
fontSize: 15,
color: 'red'
},
});
Tried keyboardAvoidingView element in react native but i can not get a good result
Could you help me please?

you have to manually close it in this case either put the input autoFocus to false or use the manual react-native Keyboard handler like below:
import {Keyboard} from 'react-native'
Now when the component mounts we will close the keyboard.
componentDidMount(){
Keyboard.dismiss();
}

React Native, having problems with Flex Box

I'm practicing my React Native programming and I have an issue with the Flex Layout that I don't seem to understand pretty well
I wanted to make my test app look like this image below
Sample App
But in the end, this is what I get. There is some misalignment in the 'Home' text which suppose to be centered properly and a missing gap on the two right icons.
Sample Test App
I have tried putting padding on the two icon but have no luck with in.
Here's my code:
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<Icon name="menu" size={30} color="white" />
<Text style={styles.headerRowPage}>Home</Text>
<View style={styles.headerRowIcons}>
<Icon name="filter" size={30} color="white" />
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column',
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center',
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff',
},
headerRowContainer: {
flexDirection: 'row',
justifyContent: 'space-between',
margin: 10
},
headerRowIcons: {
//backgroundColor: 'red',
flexDirection: 'row',
justifyContent: 'space-between',
},
headerRowPage: {
// marginLeft:20,
fontSize: 25,
fontWeight: '500',
color: '#fff',
}
});

To align childs of headerContainer vertically you should use alignItems with the code below :
headerContainer: {
display: 'flex',
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center',
alignItems: 'center'
}
A usefull resource to understand flexbox : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Remove too your marginTop on headerBrandingContainer styles.
EDIT:
Finally I think the best way is to make some modifications in the component tree so that the headerRowContainer items are all flex elements to 1. In this way, the title is always centered (the views having the same size) and we can now manage the placement of buttons without impacting the rest. It works perfectly for me.
import React from 'react';
import Icon from 'react-native-vector-icons/Feather';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={styles.headerBrandingContainer}>
<Text style={styles.headerBranding}>Brand</Text>
</View>
<View style={styles.headerRowContainer}>
<View style={styles.buttonsContainerLeft}>
<Icon name="menu" size={30} color="white" />
</View>
<View style={styles.titleContainer}>
<Text style={styles.headerRowPage}>Home</Text>
</View>
<View style={styles.headerRowIcons}>
<Icon
name="filter"
size={30}
color="white"
style={styles.filterIcon}
/>
<Icon name="search" size={30} color="white" />
</View>
</View>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'column'
},
headerContainer: {
backgroundColor: '#3498db',
height: 180,
justifyContent: 'center'
},
headerBrandingContainer: {
marginTop: 50,
alignItems: 'center'
},
headerBranding: {
fontSize: 40,
fontWeight: '400',
letterSpacing: 1,
color: '#fff'
},
headerRowContainer: {
flex: 1,
flexDirection: 'row',
alignItems: 'center',
margin: 10
},
buttonsContainerLeft: {
flex: 1,
flexDirection: 'row',
justifyContent: 'flex-start'
},
titleContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center'
},
headerRowIcons: {
flex: 1,
alignItems: 'center',
flexDirection: 'row',
justifyContent: 'flex-end'
},
headerRowPage: {
fontSize: 25,
fontWeight: '500',
color: '#fff'
},
filterIcon: {
marginRight: 20
}
});