[go: up one dir, main page]
Scribd
Upload
3 views3 pages

Code

The document contains three React Native components: a form with email and password inputs, a switch that toggles between active and inactive states, and a modal that can be shown or hidden with a button. Each component is styled using StyleSheet for layout and design. The components utilize state management to handle user interactions and visibility.

Uploaded by

Mohamed Iman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views3 pages

Code

The document contains three React Native components: a form with email and password inputs, a switch that toggles between active and inactive states, and a modal that can be shown or hidden with a button. Each component is styled using StyleSheet for layout and design. The components utilize state management to handle user interactions and visibility.

Uploaded by

Mohamed Iman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

TextInput:

import { StyleSheet, View, TextInput} from "react-native";

export default function App(){

return(
<View style={styles.container}>
<TextInput
placeholder="Email Address"
style={styles.input}
/>
<TextInput
placeholder="Password"
style={styles.input}
secureTextEntry={true}
/>
</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
input: {
borderColor: 'black',
borderWidth: 1,
height: 40,
width: '80%',
paddingLeft: 20,
borderRadius: 30,
marginTop: 20
}
})
Switch:

import { useState } from "react";


import { StyleSheet, View, Switch, Text} from "react-native";

export default function App(){


const [isVisible, setIsVisible] = useState(false);
const [text, setText] = useState("Press the Switch");
const toggleSwitch = () => {
if(isVisible){
setText("Inactive");
}else{
setText("Active");
}
setIsVisible(previousState => !previousState);
}
return(
<View style={styles.container}>
<Text style={{margin: 20}}>{text}</Text>
<Switch
onValueChange={toggleSwitch}
value={isVisible}
/>
</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},

})
Modal:

import { useState } from "react";


import { StyleSheet, View, Text, Modal, Button} from "react-native";

export default function App(){


const [modalVisible, setModalVisible] = useState(false);

return(
<View style={styles.container}>
<Modal visible={modalVisible} animationType="slide">
<View style={styles.modal1}>
<Button title="Close" onPress={() => setModalVisible(false)} />
</View>
</Modal>

<Button title="Show Modal" onPress={() => setModalVisible(true)} />


</View>
);
}

const styles = StyleSheet.create({


container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
modal1: {
backgroundColor: 'plum',
padding: 60,
position: 'absolute',
bottom: 0,
width: '100%'
}
})

You might also like