Question

147

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

rated 0 times [ 149] [ 2] / answers: 1 / hits: 17046 / 9 Years ago, wed, september 16, 2015, 12:00:00

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)',

    }

})

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

malkajillc

Add To Favorites

Follow

Total Points: 652

Total Questions: 107

Total Answers: 98

Location: Finland

Member since Sat, Nov 6, 2021

3 Years ago

malkajillc questions

1 Vitest mock modules function in only one test and use the actual function in others

Wed, Nov 2, 22, 00:00, 2 Years ago

1 How to change PrismaClient database connection at runtime?

Tue, Jun 29, 21, 00:00, 3 Years ago

1 How do I add the axios package to my chrome extension I'm working on?

Tue, Dec 15, 20, 00:00, 4 Years ago

1 How to make a bot ping a user using discord.js

Fri, Aug 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'v4' of undefined

Tue, Aug 11, 20, 00:00, 4 Years ago

View All

answered 9 Years ago marcos · Accepted Answer

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',

        }

    })