reactjsnative
React Native file name
How to remove that extra navigation bar where is saying index? 3 days trying to figure it out Can't understand why when I use just Stack screen no extra index . I just try use index appears . I follow docs with just empty project same thing there name file displayed on top Any one had same issues with Drawer ?
<Drawer.Navigator initialRouteName="Home"
screenOptions={({ route }) => ({
drawerLabel: () => null, // Hide the default page name label
drawerIcon: ({ focused }) => (
// You can also render an icon here instead of the name
<CustomDrawerScreen name={route.name} />
),
})}
>
<Drawer.Screen name="Home" component={HomeContent} />
</Drawer.Navigator>
export default function HomeContent(){
return (
<SafeAreaView style={{flex: 1, backgroundColor: "#FAFAFC"}}>
<Stack.Screen
options={
{
headerStyle: {
backgroundColor: COLORS.primary
},
headerShadowVisible: false,
headerLeft: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}
onPress={(navigation) => {
navigation.openDrawer()
}}
>
<Image
style={{
width: "70%",
height: "70%",
}}
source={menu}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerRight: () => (
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: "#ffffff", padding: 4, borderRadius: SIZES.medium,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={notify}
resizeMode="contain"
/>
</TouchableOpacity>
),
headerTitle: ""
}
}>
</Stack.Screen>
<View style={{marginBottom: 100}}>
<Svg
style={{position: "absolute", top: -68}}
height="300"
viewBox="0 0 1315 605"
width="100%"
dimension={"100%"}
>
<Path
fill={COLORS.primary}
d={'M0,160L21.8,138.7C43.6,117,87,75,131,85.3C174.5,96,218,160,262,165.3C305.5,171,349,117,393,122.7C436.4,128,480,192,524,213.3C567.3,235,611,213,655,192C698.2,171,742,149,785,144C829.1,139,873,149,916,144C960,139,1004,117,1047,138.7C1090.9,160,1135,224,1178,208C1221.8,192,1265,96,1309,48C1352.7,0,1396,0,1418,0L1440,0L1440,0L1418.2,0C1396.4,0,1353,0,1309,0C1265.5,0,1222,0,1178,0C1134.5,0,1091,0,1047,0C1003.6,0,960,0,916,0C872.7,0,829,0,785,0C741.8,0,698,0,655,0C610.9,0,567,0,524,0C480,0,436,0,393,0C349.1,0,305,0,262,0C218.2,0,175,0,131,0C87.3,0,44,0,22,0L0,0Z'}
/>
</Svg>
<View style={{
width: "100%",
position: "absolute",
top: 60,
left: 20,
paddingBottom: 5
}}>
<Text style={{
fontSize: SIZES.medium,
}}>
Hello David
</Text>
<Text style={{
fontWeight: "bold",
fontSize: SIZES.medium,
}}>
Your watch list today
</Text>
<TouchableOpacity style={{
width: 40, height: 40, justifyContent: "center",
alignItems: "center", backgroundColor: COLORS.primary, padding: 4, borderRadius: SIZES.medium,
position: "absolute",
right: 45,
}}>
<Image
style={{
width: "70%",
height: "70%",
}}
source={add}
resizeMode="contain"
/>
</TouchableOpacity>
</View>
</View>
<View style={{
flex: 1,
padding: SIZES.medium,
justifyContent: "center"
}}>
{isLoading ? <ActivityIndicator size="large" color={COLORS.primary}/>
: error ? (
<Text>Something went wrong</Text>
) : data.length === 0 ?
(
<View style={{
flex: 1,
width: "100%",
padding: SIZES.medium,
justifyContent: "center",
alignItems: "center",
}}>
<View style={{
backgroundColor: COLORS.secondary,
padding: 20,
borderRadius: 10
}}>
<Text style={{
color: COLORS.white,
fontWeight: 600
}}
>No data available</Text>
</View>
</View>
) : (
<FlatList data={data} renderItem={({item}) => (
<TouchableOpacity style={{
backgroundColor: COLORS.thirty,
borderRadius: 10,
margin: 5,
shadowColor: COLORS.primary,
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.5,
shadowRadius: 3.84,
elevation: 5,
padding: SIZES.small,
}}>
<View style={{
flex: 1,
justifyContent: "space-between",
flexDirection: "row",
borderRadius: SIZES.small,
backgroundColor: "#FFF",
shadowColor: COLORS.white,
alignItems: "center"
}}>
<View
style={{
width: 50,
height: 50,
backgroundColor: COLORS.white,
borderRadius: SIZES.medium,
justifyContent: "center"
}}
>
<Image
style={{
width: "70%",
height: "70%",
}}
source={photo}
/>
</View>
<View style={{
flex: 1,
justifyContent: "center"
}}>
<Text>{item.name}</Text>
<Text>20 y.o</Text>
</View>
<TouchableOpacity style={{
width: 30,
height: 30,
justifyContent: "center",
alignItems: "center",
borderWidth: 1,
borderColor: COLORS.primary,
borderRadius: SIZES.small,
}}>
<MaterialCommunityIcons name="check" size={24} color={COLORS.secondary}
onPress={() => {
console.log(item.name)
}}
/>
</TouchableOpacity>
</View>
</TouchableOpacity>
)}
keyExtractor={item => item?.id}
contentContainerStyle={{columnGap: SIZES.xSmall}}
vertical
/>
)
}
</View>
</SafeAreaView>
);
}
Solution
Solution very simple .
main _layout.js file in app folder wraps whole project.
To remove header
screenOptions={{
headerShown: false
}}
- Rcpp Rf_warningcall compiler warnings
- Modify the name of factor variables in lm function(summary function)
- Extreme value analysis and quantile estimation using log Pearson type 3 (Pearson III) distribution - R vs Python
- How to hide NAs when using xlsx::saveWorkbook?
- How do I retrieve a simple numeric value from a named numeric vector in R?
- Matching pair-wise columns from left to right across rows in one dataframe to another dataframe and adding new columns with matching values
- Income to outcome flow chart in Sankey plotly R
- color mapping in geom_conn_bundle not showing correctly
- Print R package startup message AFTER automatic package conflict messages instead of before
- Summing a set of R dataframe rows (column-wise), while retaining the first n columns
- Added variable / partial regression plots for groups in an interaction?
- how to make a topoplot in R with coordinates variable distribution
- List of all functions in base R?
- Plotting multiple plots for different initial conditions in one graph
- Printing repetitively on the same line in R
- Generating UI/Server based on initial selection
- Subset dataframe based on pickerInput
- How to let user pick the data in R-shiny?
- Couldn't show my simple bar charts separately on Shiny R dashboardBody
- How to programmatically filter contents of a second shiny app displayed via iframe
- How to select specific interesting groups for the boxplot in R Shiny app?
- Crosstable and Plot grouping with reactive values
- Is there a way to make multiple Shiny picker inputs where the selections must be disjoint?
- Delay/avoid duplication of shiny server side functions until after credentials
- Predictions only returns value "1"
- How to display a busy indicator in a shiny app?
- Append doesn't work when writing to CSV in R
- Changing the start date of a gantt chart in DiagrammeR
- Check for installed packages before running install.packages()
- Compare two columns element-wise