How do make textinput background transparent on map on react-native

Question

How can I make the outer textinput background transparent so that it look like its inside the map, not on top? Thanks in advance!

<View style={styles.container}>
    <TextInput style={styles.input}/>
    <MapView style={styles.map}/>
</View>

var styles = StyleSheet.create ({
    container: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
    },
    map: {
        flex: 1,
    },
    input: {
        height: 36,
        padding: 10,
        margin: 18,
        fontSize: 18,
        borderWidth: 1,
        borderRadius: 10,
        borderColor: '#48BBEC',
        backgroundColor: 'rgba(0,0,0,0)',
    }
})

Solution 1

Finally got it answer! Thanks to jpea!

    <View style={styles.container}>
        <MapView style={styles.map}/>
        <View style={styles.inputView}>
            <TextInput style={styles.input}/>
        </View>
    </View>

    var styles = StyleSheet.create ({
        container: {
            flex: 1,
            justifyContent: 'center',
            backgroundColor: '#F5FCFF',
        },
        map: {
            flex: 1,
        },
        inputView: {
            backgroundColor: 'rgba(0,0,0,0)',
            position: 'absolute', 
            top: 0,
            left: 5,
            right: 5
        },
        input: {
            height: 36,
            padding: 10,
            marginTop: 20,
            marginLeft: 10,
            marginRight: 10,
            fontSize: 18,
            borderWidth: 1,
            borderRadius: 10,
            borderColor: '#48BBEC',
            backgroundColor: 'white',
        }
    })

Solution 2

Try wrapping your text input in another view and setting that view's background to transparent:

<View style={styles.container}>
    <MapView style={styles.map}/>
    <View style={styles.inputWrapper}>
       <TextInput style={styles.inputSearch}/>
    </View>
</View>

inputWrapper: {
    flex: 1,
    backgroundColor: 'transparent',
    position: 'absolute', 
    top: 0,
  },
inputSearch: {
    backgroundColor: 'rgba(0,0,0,0.4)', // 40% opaque
    color: 'white',
}

Comments

[phongyewtong]

its doesnt work. the inner bg change opacity. what is need is the outer bg but thanks haha

[Surajit Jati]

edited. I'm doing the same thing on a project and that was my approach.