I have a screen in my React Native app that show/hide content based on some toggle buttons using Hooks. Everything is working fine but I'd like to improve the UI and add some animation to slide in the new content and slide out the old one.
Here's my code...
const [activeSwitch, setActiveSwitch] = useState(0);
...
return (
<Scrollview>
{activeSwitch === 1 ? (
<View>
<Text>SCREEN 1</Text>
</View>
) : null}
{activeSwitch === 2 ? (
<View>
<Text>SCREEN 2</Text>
</View>
) : null}
{activeSwitch === 3 ? (
<View>
<Text>SCREEN 3</Text>
</View>
) : null}
</Scrollview>
)}
I'm setting the state using setActiveSwitch() based on which button I click.
I've never worked with the Animation API before and tried to look at the documentation here but could not make it to work. Any help would be appreciated.
Related
I am new in react native and developing a mobile application in React-Native.
At one screen I have used Flatlist to show number of video items, and there is one header and footer also required in that particular scree. The thing is working well but when I put console in header and footer component then I got to know that these component are re-rendring number of time. So ho can I restrict them to re-render. I have used various way to handle but nothing get help me.
Here is the code of my screen where I am using this thing.
return (
<>
<View style={styles.videosView}>
<FlatList
windowSize={6}
initialNumToRender={10}
showsHorizontalScrollIndicator={false}
showsVerticalScrollIndicator={false}
numColumns={2}
data={pozzles?.length % 2 === 0 ? pozzles : [...pozzles, {}]}
ListHeaderComponent={userInfoHeader}
renderItem={renderItem}
ListFooterComponent={videoListFooter}
columnWrapperStyle={styles.coloumContainer}
style={styles.videoListStyle}
contentContainerStyle={styles.videoListContentStyle}
ListFooterComponentStyle={{ backgroundColor: Colors.GRAYOFF }}
keyExtractor={item => item._id}
onEndReached={onEndReachCall}
onEndReachedThreshold={0.01}
/>
</View>
</>
);
And here is the header and footer component :-
function userInfoHeader() {
console.log('Header rendring.....');
return (
<VStack justify="space-evenly" style={styles.editView}>
<HStack style={styles.userSummary}>
<Image
style={styles.userImage}
source={{
uri:
user?.user?.profilePhoto !== ''
? user?.user?.profilePhoto
: pozzlePilot,
}}
height={112}
width={112}
/>
............
</HStack>
</VStack>
}
)
Footer :-
function videoListFooter() {
console.log('Footer rendring.....');
return (
<View style={styles.footerStyle}>
{user?.user?.pozzleVideos === 0 ? (
<>{noVideoYetLabel()}</>
............
</View >
}
)
Can someone please help me to restrict that re-rendring....
Im sending the data "item.email" from screen X to screen HomeParent
How can I retrieve the data in the HomeParent screen?
renderItem=(item,index)=>{
return(
<View style={styles.listItemContainer}>
<TouchableOpacity onPress={()=>this.props.navigation.navigate("HomeParent",item.email)}>
<View style={styles.listItemTitleContainer}>
<Text>Hello</Text>
</View>
</TouchableOpacity>
</View>
)
}
Pass it as a object field
<TouchableOpacity onPress={()=>this.props.navigation.navigate("HomeParent",{mail:item.email})}>
and use getParam like this,
const email = this.props.navigation.getParam('mail')
enter code hereI want to show a toast when my modal is visible in my react native project.
I use react-native-modal.
I have a button in modal when i press it should show up a toast
I don't want to put my toast tag inside the modal tag
what should i do???
render(){
return(
<>
<Modal visible={this.state.visible}>
<Toast
ref="toast"
style={{backgroundColor:'red'}}
position='bottom'
positionValue={100}
fadeInDuration={1000}
fadeOutDuration={1000}
opacity={0.8}
textStyle={{color:'blue'}}
/>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>this.refs.toast.show('hello world!')} style={{height:200,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'blue'}}>
<Text>Modal Button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</Modal>
<SafeAreaView style={{flex:1}}>
<View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
<TouchableOpacity onPress={()=>{this.setState({visible:true})}} style={{height:100,width:100,justifyContent:'center',alignItems:'center',backgroundColor:'red'}}>
<Text>button</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
</>
)
}
Actually i wanna be my toast out of my Modal tag but it show in top of screen when modal is visible
react native modal is a native view, so impossible to be covered by a js component.
How to implement exactly the same swipeable bottom sheet in React Native:
react-swipeable-bottom-sheet (demo gif above) lib is working only in React.
I know react-native-overlay-section but it is opening to the top of the window with bounce animation.
EDIT
I also tried react-native-touch-through-view, but there is a known issue with touches through the TouchThroughView...
<View style={styles.container}>
<View style={styles.contentContainer}>
<FlatList
data={this.state.list}
renderItem={(data) => {
<View>
<Text>{"Bla bla bla"}</Text>
<TouchableOpacity onPress={()=> this.onPress()}>
<Text>{"THIS IS NOT WORKING ON ANDROID"}</Text>
</TouchableOpacity>
</View>
}} />
</View>
<TouchThroughWrapper style={styles.scrollWrapper}>
<ListView
style={styles.scroller}
dataSource={actionsList}
renderHeader={() => <TouchThroughView style={styles.touchThroughView} />}
renderRow={(rowData) => {
return (
<Text style={styles.itemRow}>{rowData}</Text>
)
}}>
</ListView>
</TouchThroughWrapper>
You can achieve your requirement with the help of following package.
https://www.npmjs.com/package/react-native-touch-through-view
This package allows scroll views and table views to scroll over interactable content without poor performing size and bounds animations.
This is kind of what I want to achieve in my react native app. How should I go about it?
this is just an idea to show or hide a TextInput upon button press
return (
<View>
<TouchableOpacity onPress={() => this.setState({show : !this.state.show})}>
<Text>Click Here</Text>
</TouchableOpacity>
{this.state.show ? <TextInput
Value={this.state.value}
onChangeText={value => this.setState({value})}
/>
: null}
</View>
);
Initialize this.state.show as either true or false according to your requirement.
Your question could have been more clearer along with your efforts that you had tried