CODEWITHSUNDEEP
reactjsreact-native
El Dude
El Dude

Reputation: 5618

React Native position search bar over map

How can I position the search bar over the map instead of next to the map (screenshot)? I want to mimic the look and feel of the Google Maps app in mine. They have the bar above the ~ top 10% of the map.

<View>
        <StatusBar backgroundColor="rgba(1.0, 0, 0, 0.2)" translucent />
        <SearchBar
          ref='searchBar'
          placeholder='Find me'
          barStyle="black"
          showsCancelButtonWhileEditing={false}
        />
        <MapView
          provider={ PROVIDER_GOOGLE }
          style={ styles.container }
          initialRegion={{
            latitude: 32.815013,
            longitude: -117.273404,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
        />
      </View>

enter image description here

Upvotes: 2

Views: 3957

Answers (1)

vijayst
vijayst

Reputation: 21836

Stretch the MapView to the full screen size using flex: 1.

Absolute position the Searchbar and set the coordinates. position: absolute;

Upvotes: 1

Related Questions