I'm trying to render the headerRight conditionally based on a navigation param. I am currently trying this in the static navigationOptions. Here is my code but nothing is rendering to the screen
static navigationOptions = ({navigation}) => ({
headerRight : () => {
if (navigation.state.params.user.following) {
return (
<TouchableOpacity
onPress={() => this.followUser()}>
<Icon2 name="ios-person-add-outline" size={35} />
</TouchableOpacity>
)} else {
return (
<TouchableOpacity
onPress={() => this.unfollowUser()}>
<Icon name="user-times" size={20} />
</TouchableOpacity>
)}
},
})
Can this be done or will I need to use a custom header here?
Any help would be hugely appreciated! Thanks!
Solution:
remove the anonymous function and implement the conditional syntax recommended by soutot
static navigationOptions = ({navigation}) => ({
headerRight : navigation.state.params.otherUser.following ?
( <TouchableOpacity
onPress={() => this.followUser()}>
<Icon2 name="ios-person-add-outline" size={35} />
</TouchableOpacity> )
:
( <TouchableOpacity
onPress={() => this.unfollowUser()}>
<Icon name="user-times" size={20} />
</TouchableOpacity> )
})
You are using a comma (,) after your 'else' statement. Also you can try something like this
return(
navigation.state.params.user.following ?
<TouchableOpacity
onPress={() => this.followUser()}>
<Icon2 name="ios-person-add-outline" size={35} />
</TouchableOpacity>
:
<TouchableOpacity
onPress={() => this.unfollowUser()}>
<Icon name="user-times" size={20} />
</TouchableOpacity>
);
For more info about conditional rendering, check the following docs:
https://facebook.github.io/react/docs/conditional-rendering.html
https://facebook.github.io/react/docs/conditional-rendering.html#inline-if-else-with-conditional-operator
Hope it helps
Related
I want to use toggle with map function.
I've tried many things, but I returned to the first code. I know what's the problem(I use the map function, but I use only one toggle variable), but I don't know how to fix it.
This is my code.
const [toggle, setToggle] = useState(true);
const toggleFunction = () => {
setToggle(!toggle);
};
{wholeData.map((image)=>{
return(
<TouchableOpacity
key={image.ROWNUM}
onPress={() => navigation.navigate("DetailStore", {
contents: image,
data: wholeData
})}
>
.
.
.
<TouchableOpacity onPress={() => toggleFunction()}>
{toggle ? (
<View style={{marginRight: 11}}>
<AntDesign name="hearto" size={24} color="#C7382A" />
</View>
) : (
<View style={{marginRight:11}}>
<AntDesign name="heart" size={24} color="#C7382A" />
</View>
)}
</TouchableOpacity>
As you've noticed, using a single state for all the toggles won't give you what you want. All you have to do is move your toggle function inside the component you return when you're mapping over your images.
As an unrelated note, you could also simplify your second TouchableOpacity a bit, since the only thing that changes is the icon name.
For example:
// New component
const ListImage = ({ image }) => {
const [toggle, setToggle] = useState(true);
const toggleFunction = () => {
setToggle(!toggle);
};
return (
<TouchableOpacity
key={image.ROWNUM}
onPress={() => navigation.navigate("DetailStore", {
contents: image,
data: wholeData
})}
>
...
<TouchableOpacity onPress={() => toggleFunction()}>
<View style={{ marginRight: 11 }}>
<AntDesign
name={toggle ? "hearto" : "heart"}
size={24}
color="#C7382A"
/>
</View>
</TouchableOpacity>
)
}
// in current component
{wholeData.map((image) => {
return <ListImage image={image} />
})}
I'm new to programming and when I navigate to the new screen and the bottom sheet doesn't close here's the picture of it. I'm using #gorhom/bottom-sheet^4.I have done some research and I know that using useFocusEffect could acheive it but i dont really know how. Can someone help me on this?
<BottomSheetModal
enablePanDownToClose={true}
ref={bottomSheetModalRef}
index={0}
snapPoints={snapPoint}
backdropComponent={renderBackdrop}
>
<View>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Settings");
}}
>
<Text style={styles.modalText}>Settings</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Saved");
}}
>
<Text style={styles.modalText}>Saved</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Delete");
}}
>
<Text style={styles.modalText}>Delete</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback onPress={() => {}}>
<Text style={styles.modalText}>Log out</Text>
</TouchableWithoutFeedback>
</View>
</BottomSheetModal>
There are few ways to do it. Here are two:
Add useFocusEffect that runs when your screen with BottomSheetModal is unfocused:
useFocusEffect(
React.useCallback(() => {
return () => bottomSheetRef.current?.close()
}, [])
);
Close BottomSheetModal, whenever you are leaving your screen. In order to do that, you have to call bottomSheetModalRef.current?.close while navigating:
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Settings");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Settings</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Saved");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Saved</Text>
</TouchableWithoutFeedback>
<TouchableWithoutFeedback
onPress={() => {
navigation.navigate("Delete");
bottomSheetModalRef.current?.close();
}}
>
<Text style={styles.modalText}>Delete</Text>
</TouchableWithoutFeedback>
If you're using React Navigation you can also automatically close any open modals whenever navigation changes like so:
import { useBottomSheetModal } from '#gorhom/bottom-sheet'
const Navigation = () => {
const { dismissAll: dismissAllModals } = useBottomSheetModal()
return <NavigationContainer
onStateChange={() =>
dismissAllModals()
}>
{...}
</NavigationContainer>
}
I'm nesting screens and passing props to the screens such as header title, and a render of json.
Earlier today everything was working but now it gives me the error of getParams.
HomeStack.js, here in the title I get the title by the FlatList render in the screen which navigates to this one.
<Screen
name='errorHP'
component={errorHP}
options={{
headerTitle: () => <Header navigation={navigation} title={navigation.getParam('name')} />,
headerTitleAlign: 'center',}}
/>
HP.js, here the flatlist renders and will export the render to the page errorHP
<FlatList data={filteredSearch} keyExtractor={(item) => item.key} renderItem={({item}) => (
<TouchableOpacity onPress={() => navigation.navigate('errorHP', item)}>
<Card>
<Text style={globalStyles.titleText}> {item.name} </Text>
</Card>
</TouchableOpacity>
)} />
errorHP.js, here are listed the errors and after click, will pass again params to a new page which gets the error details.
export default function errorHP ({navigation}) {
const data = navigation.getParam('errors');
const errors = Object.keys(data);
return (
<View style={globalStyles.container}>
<FlatList data={errors} renderItem={({item}) => (
<TouchableOpacity>
<Card>
<Text style={globalStyles.titleText}> {item} </Text>
</Card>
</TouchableOpacity>
)} />
I've been messing around and still cant solve this problem.
Thanks for your attention!
You need to get params from the route prop:
export default function errorHP ({navigation, route}) {
const data = route.params.errors;
// whatever
}
And
<Screen
name="errorHP"
component={errorHP}
options={({ route, navigation }) => ({
headerTitle: () => (
<Header navigation={navigation} title={route.params.name} />
),
headerTitleAlign: 'center',
})}
/>
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');
}
I have 5 options that I wrapped with touchableopacity. I'd like that when one options is clicked that the color turns green. If i click another option then the previous option goes grey and the new option is green. Can someone please help me code this out? I don't want to write a bunch of IF statements. I feel its bad code and there is a faster way of getting to my goal. Don't mind the Alert function there I only had that when i initially setup the touchableopacity.
const [angryColor, setAngryColor] = useState('grey')
const [sadColor, setEmojiSad] = useState('grey')
const [neutral, setNuetral] = useState('grey')
const [happyColor, setHappyColor] = useState('grey')
const [laughColor, setLaugh] = useState('grey')
function toggleAngry(){
if (angryColor === 'grey'){
setAngryColor('green')
} else {
setAngryColor('grey')
}
}
return(
<View style={styles.screen}>
<View style={styles.container}>
<View style={styles.emojiView}>
<TouchableOpacity onPress={() => toggleAngry()}>
<FontAwesome5 name="angry" size={40} color={angryColor}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('clicked')}>
<Entypo name="emoji-sad" size={40} color={sadColor}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('clicked')}>
<Entypo name="emoji-neutral" size={40} color={neutral} />
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('clicked')}>
<Entypo name="emoji-happy" size={40} color={happyColor}/>
</TouchableOpacity>
<TouchableOpacity onPress={() => Alert.alert('clicked')}>
<FontAwesome5 name="laugh-beam" size={40} color={laughColor} />
</TouchableOpacity>
</View>
You can set a single variable and set the colour based on that. There is no need for multiple states. I added a callback function which can be used by the parent component to get this update.
const EmojiInput = (props) => {
const [selected, setSelected] = React.useState(0);
const onItemSelected=emoji=>{
setSelected(emoji);
if(props.callback){
props.callback(emoji);
}
};
return (
<View style={styles.emojiView}>
<TouchableOpacity onPress={() => onItemSelected(1)}>
<FontAwesome5 name="angry" size={40} color={selected==1?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(2)}>
<Entypo name="emoji-sad" size={40} color={selected==2?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(3)}>
<Entypo name="emoji-neutral" size={40} color={selected==3?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(4)}>
<Entypo name="emoji-happy" size={40} color={selected==4?'red':'grey'} />
</TouchableOpacity>
<TouchableOpacity onPress={() => onItemSelected(5)}>
<FontAwesome5 name="laugh-beam" size={40} color={selected==5?'red':'grey'} />
</TouchableOpacity>
</View>
);
};