I am trying to figure out how I would style an input using react-native-elements like the picture shown in the docs... I want the inputs to look like the top ones with the white background, but I have no idea how I would go about doing this. The main issue I am stuck with is getting the pointy edges on the input container. Any help? 
(source: github.io)
Add a comment
|
1 Answer
I don't know how to make this, but I think ImageBackground can solve the problem. I used it as a picture of a question because I don't have an image.
import * as React from 'react';
import { Text, View, StyleSheet,TextInput,ImageBackground } from 'react-native';
import Constants from 'expo-constants';
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Use ImageBackground
</Text>
<ImageBackground style={{height: 40 , width:"100%"}} source={require("./test.png")}>
<TextInput style={{height: 40,color:"red",paddingHorizontal:120}} />
</ImageBackground>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});
