Skip to content

Instantly share code, notes, and snippets.

@AnoRebel
Created January 14, 2020 10:39
Show Gist options
  • Save AnoRebel/db72e01eb0ebc0db92de25040d08ba6b to your computer and use it in GitHub Desktop.
Save AnoRebel/db72e01eb0ebc0db92de25040d08ba6b to your computer and use it in GitHub Desktop.
A simple react native page with a table and an onClick Modal popup with passed propfrom parent purely in React Fucntional Components
import React, { Component } from 'react';
import { StyleSheet, Dimensions, Platform, Text, SafeAreaView, View, TextInput, Image, Button, FlatList, Alert } from 'react-native';
import { Icon } from 'react-native-elements';
import Modal from "react-native-modal";
const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;
export default function App() {
const [visible, onChangeVisibility] = React.useState(false);
const [passed, onChangeItem] = React.useState('');
const [input, onChangeText] = React.useState('Useless Placeholder');
const items = [
{ key: "Freddy" },
{ key: "Maku" },
{ key: "313" },
{ key: "0752" },
{ key: "Swahili" },
{ key: "May" },
{ key: "Patrick" },
{ key: "471" },
{ key: "0755" },
{ key: "English" },
{ key: "Ali" },
{ key: "Juma" },
{ key: "Database" },
{ key: "751" },
{ key: "French" },
{ key: "Justin" },
{ key: "Michael" },
{ key: "749" },
{ key: "255" },
{ key: "All" },
];
const titles = [
{ key: "Name" },
{ key: "Income" },
{ key: "Address" },
{ key: "Phone" },
{ key: "Language" }
];
getItem = item => {
Alert.alert(item);
};
handleSelect = item => {
onChangeItem(item);
onChangeVisibility(!visible);
}
return (
<SafeAreaView style={ styles.AndroidSafeArea }>
<View style={styles.container}>
<View style={ styles.logo }>
<Image
style={{ width: 150, height: 150 }}
source={ require('./assets/avatar.png') }
/>
<Text style={ styles.title }>DAWASA </Text>
</View>
</View>
<View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
<View style={ styles.searchIcon }>
<Text style={ styles.searchText }>Search </Text>
<Icon
name='search'
type='font-awesome'
onPress={() => console.log('hello')} />
</View>
<TextInput
style={ styles.input }
onChangeText={ text => onChangeText(text) }
value={ input }
blurOnSubmit={ true }
/>
</View>
<View style={{ padding: 10, marginTop: 30 }}>
<FlatList
data= { titles }
renderItem={ ({item}) =>
<View style={styles.GridViewTitleContainer}>
<Text style={styles.GridViewTitleLayout} onPress={() => getItem(item.key)} > {item.key} </Text>
</View> }
numColumns={5} />
<FlatList
data={ items }
renderItem={ ({item}) =>
<View style={styles.GridViewContainer}>
<Text style={styles.GridViewTextLayout} onPress={() => handleSelect(item.key)} > {item.key} </Text>
</View> }
numColumns={5} />
<CustomModal visible={ visible } content={ passed } onChangeVisibility={ onChangeVisibility } />
</View>
</SafeAreaView>
);
}
export function CustomModal(props) {
return (
<View style={ styles.modal }>
<Modal isVisible={ props.visible }>
<View style={ styles.logo }>
<Image
style={{ width: 150, height: 150 }}
source={ require('./assets/avatar.png') }
/>
<Text style={{ textAlign: 'center', fontSize: 28, fontWeight: 'bold', color: 'white' }}>{ props.content }</Text>
<Button title="Hide modal" onPress={ () => props.onChangeVisibility(!props.visible) } />
</View>
</Modal>
</View>
);
}
const styles = StyleSheet.create({
AndroidSafeArea: {
flex: 1,
backgroundColor: "white",
paddingTop: Platform.OS === 'android' ? 50 : 0
},
container: {
// top: 120,
backgroundColor: '#fff',
justifyContent: 'center',
},
logo: {
alignItems: 'center',
paddingBottom: 40
},
modal: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
searchIcon: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
searchText: {
textAlign: 'center',
fontSize: 28,
fontWeight: 'bold',
paddingRight: 10
},
title: {
color: 'black',
fontSize: 40,
fontWeight: 'bold',
padding: 10
},
input: {
flex: 2,
height: 60,
borderColor: 'gray',
borderLeftWidth: 0,
borderRightWidth: 0,
borderTopWidth: 0,
borderBottomWidth: 2,
fontSize: 20,
textAlign: 'center',
padding: 10,
marginRight: 20
},
headerText: {
fontSize: 20,
textAlign: "center",
margin: 10,
fontWeight: "bold"
},
GridViewTitleContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 60,
borderWidth: 2,
borderColor: 'black',
marginTop: 30,
backgroundColor: 'gray'
},
GridViewContainer: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
height: 70,
borderWidth: 1,
borderColor: 'gray',
// margin: 5,
marginTop: 5,
// backgroundColor: '#7B1FA2'
},
GridViewTitleLayout: {
fontSize: 16,
fontWeight: 'bold',
justifyContent: 'center',
// color: '#fff',
color: 'black',
padding: 2,
},
GridViewTextLayout: {
fontSize: 16,
justifyContent: 'center',
color: 'black',
// color: '#fff',
padding: 10,
}
});
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"expo": "~36.0.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
"react-native-elements": "^1.2.7",
"react-native-modal": "^11.5.3",
"react-native-web": "~0.11.7"
},
"devDependencies": {
"@babel/core": "^7.0.0",
"babel-preset-expo": "~8.0.0"
},
"private": true
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment