I am trying to let allow the button to navigate me to the Home Screen after pressing, but it seems like the function does not have the variable 'navigation', how do I pass this variable to the function? Below is my code snippet
const LoggedInPage = props => {
return (
<View style={styles.container}>
<Text style={styles.loggedin}>Welcome: {props.name}</Text>
<Image style={styles.image} source={{ uri: props.photoUrl }} />
<TouchableOpacity style={styles.button2} onPress={() => this.props.navigation.navigate('Home')}>
<Text style={styles.buttonText}>Get Started!</Text>
</TouchableOpacity>
</View>
)
}
There is no this binding in functional component; you can use useNavigation hook to get the navigation prop.
Code:
const LoggedInPage = ({ name, photoUrl }) => {
const navigation = useNavigation();
return (
<View style={styles.container}>
<Text style={styles.loggedin}>Welcome: {name}</Text>
<Image style={styles.image} source={{ uri: photoUrl }} />
<TouchableOpacity style={styles.button2} onPress={() => navigation.navigate('Home')}>
<Text style={styles.buttonText}>Get Started!</Text>
</TouchableOpacity>
</View>
)
}
Related
Image, title, price and description are saved in the database (SQlite
i send the saved data to the listing screen with navigation
const sendMeToNewList=()=>{
return(
<View>
{
dataFromDatabase &&
navigation.navigate('listings',{image:image, title:title, price:price, description:description})
}
</View>
)
}
function ListingScreen({navigation}, props) {
const route = useRoute();
const myroute = route.params
return (
<View style={{flex: 1}}>
<ScrollView>
<View style={styles.container}>
<View style={styles.cardContainer}>
{
!myroute &&
<View>
<TouchableOpacity activeOpacity="0.6" onPress ={()=> navigation.navigate("listingdetail")}>
<Image style={styles.image}
source={require('../assets/redphone.jpg')}
/>
</TouchableOpacity>
<Text style={styles.productTitle}>RedIphone for Sale</Text>
<Text style={styles.productPrice}>$950</Text>
</View>
}
{
myroute &&
<View>
<TouchableOpacity activeOpacity="0.6" onPress ={()=> navigation.navigate("listingdetail")}>
<Image style={styles.image}source={{ uri: myroute.image }} />
</TouchableOpacity>
<Text style={styles.productTitle}>{myroute.title}</Text>
<Text style={styles.productPrice}>{myroute.price}</Text>
<Text style={styles.productDescription}>{myroute.description}</Text>
</View>
}
)
The above snippet will display the data with the image but once I refresh the page it vanishes. How can I save the data and pass it through to another screen?
Good evening everyone .
I have created the following Flatlist :
<View style={{ flex: 1 }}>
<FlatList
ListFooterComponent={
loadMore && page < pageMax ? (
<ActivityIndicator color={Colors.grey40} />
) : (
<View />
)
}
ListFooterComponentStyle={{ height: 200 }}
contentContainerStyle={styles.listExercise}
keyExtractor={() => uuid.v4()}
data={exercises}
renderItem={renderItemRE}
removeClippedSubviews={true}
onEndReached={() => {
setOnEndReachedCalledDuringMomentum(true);
}}
onMomentumScrollEnd={loadMoreFc}
onEndReachedThreshold={0.3}
ListEmptyComponent={
<Text contentW B18>
Nessuna Esercizio presente
</Text>
}
/>
</View>
This is renderItem function
const renderItemRE = ({ item }) => {
return (
<RenderItemRE
selectables={route.params?.selectables}
item={item}
navigation={navigation}
/>
);
};
And finally this is my component RenderItemRE
const RenderItemRE = ({ item, navigation, selectables }) => {
return (
<View style={styles.globalContainer}>
<TouchableOpacity
style={styles.touchable}
onPress={() => {
navigation.navigate(Routes.InfoEsercizio, {
id_ex: item.id,
nomeEx: item.nome,
});
}}
>
<View style={styles.container}>
<Image
indicator={Progress}
style={styles.img}
source={{
uri: item.galleria
? item.galleria[0]
? item.galleria[0]
: "logo"
: ApiConstants.DEFAULT_IMAGE,
}}
/>
<Text
style={[
customtext(DYNAMIC_FONTS_SIZE.FONT_SIZE_BIG).regular,
styles.nameStyle,
]}
>
{item.nome}
</Text>
</View>
</TouchableOpacity>
</View>
);
};
function arePropsEqual(prevProps, nextProps) {
return nextProps.item.id === prevProps.item.id;
}
export default memo(RenderItemRE, arePropsEqual);
This is a correct way to use memo in react native ? Or am I doing something wrong? I'm noticing that when the list gets bigger the rendering slows down. I was wondering what was the correct way to optimize. Thank you in advance
Categories.js
<FlatList
data={categorylist}
keyExtractor={(item, index) => item.tc_id}
vertical
numColumns={4}
renderItem={({ item, index }) => {
return (
<Pressable onPress={subcat}>
<View style={styles.catLayout}>
<View style={styles.imageLayout}>
<Image source={{ uri: item.image }} style={styles.image}
/>
</View>
<Text style={styles.productname}>
{item.name != null ? item.name : ""}
</Text>
<Text>{item.uuid}</Text>
</View>
</Pressable>
);
}}
/>
I am getting data from categorylist array , i am displaying a bunch of items of categories here , i want show different sub-categories depending on each items "uuid".
I want to send the {item.uuid} to subcategories screen and reuse it in there.
As you are displaying the data on the view using flatlist you have onPress after clicking on any item you just need to send the data
Screen (A)
<FlatList
data={categorylist}
keyExtractor={(item, index) => item.tc_id}
vertical
numColumns={4}
renderItem={({ item, index }) => {
return (
<Pressable onPress={() => navigation.navigate('subcategories',{uuid:item.uuid}) }>
<View style={styles.catLayout}>
<View style={styles.imageLayout}>
<Image source={{ uri: item.image }} style={styles.image}
/>
</View>
<Text style={styles.productname}>
{item.name != null ? item.name : ""}
</Text>
<Text>{item.uuid}</Text>
</View>
</Pressable>
);
}}
/>
Screen (B)
you can get it like this
class component
constructor(props) {
super(props);
this.state = {
uuID: this.props.navigation.state.params.uuid,
}
}
functional component
const Subcategory = (props) => {
const [uUID, setuUID] = useState(props.route.params.uuid);
I have flatlist with custom radio buttons implementaion, but when i tap on flatlist item it waits about second before changes to active button. I tried to useCallback with my renderItem and itemKeyExtractor functions but it doesnt help me.
Here is the code of my screen component:
export const PickOrganizationScreen = (props) => {
const { navigation, setOrganization, loadProcedureProviders, items, isLoading, procedureId, organizationId } = props;
useFocusEffect(
React.useCallback(()=>{loadProcedureProviders(procedureId);},[loadProcedureProviders, procedureId])
);
const renderItem = ({item}) => {
return (
<OrganizationItem
title={item.Title}
checked = {item.Id === organizationId}
onPress={() => {
setOrganization(item.Id, item.Title);
}}
/>);
};
const itemKeyExtractor = (item) => item.Id;
return (
isLoading ? (
<Spinner />
) : (
items.length > 0 ? (
<View style={styles.container}>
<View style={styles.paragraph}>
<Text style={styles.subtitle}>{I18n.t('pickOrganization')}</Text>
</View>
<View style={styles.alertMessage}>
<View style={styles.alertIcon}>
<Icon name="info" width={32} height={32} fill={Colors.primaryRed} />
</View>
<View>
<Text style={styles.alertText}>{I18n.t('pickOrganizationToRegisterService')}</Text>
</View>
</View>
<FlatList
data = {items}
renderItem = {renderItem}
keyExtractor = {itemKeyExtractor}
extraData={organizationId}
/>
<View style={styles.buttonWrapper}>
<ScreenButton
title={I18n.t('goToRegister')}
onPress={ () => {
navigation.navigate('ServiceSummary');
}}/>
</View>
</View>
) : (
<NotFound extraText={I18n.t('notFoundExtra')}/>
)
)
);
};
Here is the code of flatlist item component:
export const OrganizationItem = ({title, checked, onPress}) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.itemContainer}>
<View style={styles.itemIcon}>
{ checked ? (
<Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
) :
(
<Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
)
}
</View>
<View style={styles.itemText}>
<Text style={styles.title}>{title}</Text>
</View>
</View>
</TouchableOpacity>
);
};
Try memoizing OrganizationItem. Does the onPress in OrganizationItem change the items object ? If so, it will re-render the whole Flatlist even when one small change is made. If you memoize, the components memoized won't rerender unless the props passed to it changes.
export const OrganizationItem = React.memo(({title, checked, onPress}) => {
return (
<TouchableOpacity onPress={onPress}>
<View style={styles.itemContainer}>
<View style={styles.itemIcon}>
{ checked ? (
<Icon name="radio-button-on" width={16} height={16} fill={Colors.primaryRed} />
) :
(
<Icon name="radio-button-off" width={16} height={16} fill={Colors.gray} />
)
}
</View>
<View style={styles.itemText}>
<Text style={styles.title}>{title}</Text>
</View>
</View>
</TouchableOpacity>
);
});
I am using React MNavigation5 for navigating to screen but I encounter an error:
navigate is not a function:
function Categories() {
const navigate = useNavigation();
function navigateToScreen() {
navigate('ApartmentSales');
}
return (
<View >
<Text style={Styles.TextCategories}>دسته بندی ها</Text>
{/* ---------------------------------------------------------------لایه کلی صفحه---------------------------------- */}
<View style={Styles.View}>
{/* --------------------------------------------------------------- لایه دکمه ها---------------------------------- */}
<Button style={Styles.Button} onPress={ () => navigateToScreen}>
<MaterialIcons name="waves" size={30} color={"#0c7656"} />
<Text style={Styles.Text}>زمین</Text>
</Button>
You need to actually call the function.
Instead of:
onPress={() => navigateToScreen}
Do:
onPress={() => navigateToScreen()}
Or:
onPress={navigateToScreen}
Do the following:
const navigation = useNavigation();
function navigateToScreen() {
navigation.navigate('ApartmentSales');
}