Created
October 9, 2020 17:10
-
-
Save arvindrajnaidu/0f2b2c60b746217ff4d4b8b7e8fb9a0e to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * Sample React Native App | |
| * https://github.com/facebook/react-native | |
| * | |
| * @format | |
| * @flow strict-local | |
| */ | |
| import React, {useContext, useState} from 'react'; | |
| import { | |
| SafeAreaView, | |
| StyleSheet, | |
| ScrollView, | |
| View, | |
| StatusBar, | |
| } from 'react-native'; | |
| import { | |
| Header, | |
| LearnMoreLinks, | |
| Colors, | |
| DebugInstructions, | |
| ReloadInstructions, | |
| } from 'react-native/Libraries/NewAppScreen'; | |
| import PYPLProvider, {PYPLContext} from 'pypl'; | |
| import { | |
| Container, | |
| Content, | |
| Card, | |
| CardItem, | |
| Text, | |
| Body, | |
| H1, | |
| H2, | |
| H3, | |
| Button, | |
| Icon, | |
| Left, | |
| Right, | |
| Form, | |
| Label, | |
| Input, | |
| Item, | |
| } from 'native-base'; | |
| const Address = ({address}) => { | |
| const [isEditing, setIsEditing] = useState(false); | |
| const EditAddress = () => { | |
| const [values, setValues] = useState({ | |
| line1: address.line1, | |
| city: address.city | |
| }) | |
| return ( | |
| <Body> | |
| <Item fixedLabel> | |
| <Label>Line 1</Label> | |
| <Input value={values.line1} onChangeText={(text) => { | |
| setValues({...values, line1: text}) | |
| }}/> | |
| </Item> | |
| <Item fixedLabel last> | |
| <Label>City</Label> | |
| <Input value={values.city} onChangeText={(text) => { | |
| setValues({...values, city: text}) | |
| }}/> | |
| </Item> | |
| </Body> | |
| ); | |
| }; | |
| const DisplayAddress = () => { | |
| return ( | |
| <Body> | |
| <Item fixedLabel> | |
| <Label>Line 1</Label> | |
| <Input placeholder={address.line1} /> | |
| </Item> | |
| <Item fixedLabel> | |
| <Label>City</Label> | |
| <Input placeholder={address.city} /> | |
| </Item> | |
| </Body> | |
| ); | |
| }; | |
| return <Card> | |
| <CardItem header> | |
| <H3>Address</H3> | |
| </CardItem> | |
| <CardItem>{isEditing ? <EditAddress /> : <DisplayAddress />}</CardItem> | |
| <CardItem > | |
| <Left /> | |
| <Right> | |
| <Button transparent onPress={() => { | |
| setIsEditing(!isEditing) | |
| }}> | |
| { | |
| isEditing ? <Text>Done</Text> : <Text>Edit</Text> | |
| } | |
| </Button> | |
| </Right> | |
| </CardItem> | |
| </Card>; | |
| }; | |
| const Profile = () => { | |
| const {user, fetch} = useContext(PYPLContext); | |
| return ( | |
| <Content padder> | |
| <H1 style={{textAlign: 'center', margin: 10}}>{user.userName}</H1> | |
| {user.addresses.map((address, index) => ( | |
| <Address {...{address, key: index}} /> | |
| ))} | |
| </Content> | |
| ); | |
| }; | |
| const App = () => { | |
| return ( | |
| <Container> | |
| <PYPLProvider> | |
| <Profile /> | |
| </PYPLProvider> | |
| </Container> | |
| ); | |
| }; | |
| const styles = StyleSheet.create({ | |
| scrollView: { | |
| backgroundColor: Colors.lighter, | |
| }, | |
| engine: { | |
| position: 'absolute', | |
| right: 0, | |
| }, | |
| body: { | |
| backgroundColor: Colors.white, | |
| }, | |
| sectionContainer: { | |
| marginTop: 32, | |
| paddingHorizontal: 24, | |
| }, | |
| sectionTitle: { | |
| fontSize: 24, | |
| fontWeight: '600', | |
| color: Colors.black, | |
| }, | |
| sectionDescription: { | |
| marginTop: 8, | |
| fontSize: 18, | |
| fontWeight: '400', | |
| color: Colors.dark, | |
| }, | |
| highlight: { | |
| fontWeight: '700', | |
| }, | |
| footer: { | |
| color: Colors.dark, | |
| fontSize: 12, | |
| fontWeight: '600', | |
| padding: 4, | |
| paddingRight: 12, | |
| textAlign: 'right', | |
| }, | |
| }); | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment