Skip to content

Instantly share code, notes, and snippets.

@Yassir4 Yassir4/App.js
Last active Jan 5, 2019

Embed
What would you like to do?
import React from 'react';
import {
StyleSheet,
Text,
View,
ImageBackground,
TouchableOpacity,
TextInput
} from 'react-native';
import Icon from 'react-native-vector-icons/Feather';
const App = () => {
return (
<ImageBackground source={{ uri: 'https://wallpapertag.com/wallpaper/full/3/4/d/121586-new-red-gradient-background-2560x1600-for-phone.jpg' }} style={styles.container}>
<Text style={{ marginTop: '10%', fontSize: 16, color: 'white' }}>Today</Text>
<View style={styles.textInputContainer}>
<TextInput
style={styles.textInput}
multiline={true}
placeholder={'Do it now!'}
placeholderTextColor="white"
/>
<TouchableOpacity>
<Icon name="plus" size={30} color="#900" style={{ marginLeft: 15 }} />
</TouchableOpacity>
</View>
</ImageBackground>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
textInput: {
height: 20,
flex: 1,
minHeight: '7%',
marginTop: '5%',
fontSize: 25,
fontWeight: 'bold',
color: 'white',
paddingLeft: 10
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
textInputContainer: {
flexDirection: 'row',
alignItems: 'baseline',
borderColor: 'rgb(222,222,222)',
borderBottomWidth: 1,
paddingRight: 10,
paddingBottom: 5
}
});
export default App
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.