Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

is there a way to remove title on each screens in expo?

$
0
0

i am a beginner in react-native, i follow tutorials on youtube to make projects. i am trying to make an expo ui-app, but each screens has a title on the top like this:enter image description here

There is the word Explore above the screen, and each other screens has the corresponding title above it aswell. Is there a way to remove this? because i followed tutorials from youtube but they didnt have this title.

Here is the Explore.js file:

import { StyleSheet, Text, View, SafeAreaView, TextInput, Platform, StatusBar } from 'react-native';import React, { Component } from 'react';import { Ionicons } from '@expo/vector-icons';class Explore extends Component {  componentWillMount() {    this.startHeaderHeight = 80    if(Platform.OS == 'android')    {      this.startHeaderHeight = 100 + StatusBar.currentHeight    }  }  render() {   return (<SafeAreaView style={{ flex: 1 }}><View style={{ flex: 1 }}><View style={{ height: this.startHeaderHeight, backgroundColor: 'white', borderBottomWidth: 1, borderBottomColor: '#dddddd' }}><View style={{flexDirection: 'row', padding: 10, backgroundColor: 'white', marginHorizontal: 20, shadowOffset:{width:0,height:0}, shadowColor: 'black', shadowOpacity: 0.2, elevation: 1, marginTop: Platform.OS == 'android' ? 30 : 20 }}><Ionicons name="ios-search" size={20} color="black" /><TextInput               underlineColorAndroid="transparent"              placeholder='Try Indonesia'              placeholderTextColor="grey"              style={{ flex: 1, fontWeight: '700', backgroundColor: 'white', marginLeft: 10 }}                        /></View></View></View></SafeAreaView>    );  }}export default Explore;const styles = StyleSheet.create({    container: {      flex: 1,      backgroundColor: '#fff',      alignItems: 'center',      justifyContent: 'center',    },  });

and here is my app.js file:

import React from 'react';import { StyleSheet, Text, View, Image } from 'react-native';import { NavigationContainer } from '@react-navigation/native';import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';import { Ionicons } from '@expo/vector-icons';import { FontAwesome5 } from '@expo/vector-icons'; import Explore from './screens/Explore';import Saved from './screens/Saved';import Trips from './screens/Trips';import Inbox from './screens/Inbox';const Tab = createBottomTabNavigator();export default function BottomTabs() {  return (<NavigationContainer><..... CODE OF THE BOTTOM TAB NAVIGATOR IN HERE .....></NavigationContainer>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },});

Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>