I would like to be able to use the ImageBackground component from react-native and render an image full screen including the SafeArea top and bottom zone.
As you can see my background image starts under status bar and does not cover it. I would like to force my background image to cover the status bar also.
I'm using react-navigation (v5) and its SafeAreaView component.
import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
import { ImageBackground, StyleSheet } from 'react-native';
export const App = () => {
return (
<SafeAreaProvider>
<Navigation/>
</SafeAreaProvider>
);
};
const Stack = createStackNavigator();
export const Navigation = () => {
return (
<NavigationContainer>
<Stack.Navigator headerMode={null}>
<Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>
</NavigationContainer>
);
};
export const LoginScreen = (props: any) => (
<ImageBackground
source={resolver.images.login.home1}
style={{ flex: 1 }}
resizeMode={'cover'}
>
<SafeAreaView style={{ flex: 1 }}>
<View>
<Text>Welcome to React Native!</Text>
<Text>To get started, edit App.js</Text>
</View>
</SafeAreaView>
</ImageBackground>
);
I don't know how I can make my background image cover also the top status bar to make a full screen image. Some help would be really appreciated I don't see where is my mistake ...
Related
I'm writing a simple app in react native and I want to show a grid of buttons; I'm trying to fetch the title of these buttons from a .json file.
This is the portion of code i have problems with:
import { View , Button, Text, Pressable} from "react-native";
import "./wordpuzzle.json";
import puzzle from "./wordpuzzle.json";
const Row = ({ }) => (
<View style={styles.row}> </View>
)
function Griglia(){
return(
<>
<View style={styles.app}>
{puzzle.square.map(row =>(
<View >
{row.map( lettera =>(
<>
{console.log(row)}
{console.log(lettera)}
<Button onPress={()=>{console.log(lettera)}} title={lettera} color="cff3f2"> </Button>
</>
))}
</View>
))}
</View>
</>
);
}
const styles = {
app: {
flex: 4, // the number of columns you want to devide the screen into
marginHorizontal: "auto",
width: 400,
},
row: {
flexDirection: "row",
borderWidth: 1,
},
"1col": {
flex: 1
},
};
export default Griglia
}
The map method works fine (the console.log of row and lettera works), but it doesn't show anything on the page i'm calling the function Griglia into.
Also, this is the code of the page in question:
import React from "react";
import {Button, Text, View} from "react-native";
import Griglia from "../components/griglia";
function Gioco(){
return(
<>
<View>
<Griglia/>
</View>
</>
);
}
export default Gioco
And this is the App.js:
import { NavigationContainer, StackRouter } from '#react-navigation/native';
import { SafeAreaView, StyleSheet, Text, View } from 'react-native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
import Gioco from './pages/gioco';
import Home from './pages/home';
const Stack = createNativeStackNavigator();
export default function App() {
return (
<>
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="home" component={Home} />
<Stack.Screen name="gioco" component={Gioco} options={{title: "Ruzzle"}} />
</Stack.Navigator >
{/* <Form> </Form> //da mettere in un'altra pagina
<StatusBar style="auto" /> */}
</NavigationContainer>
</>
);
}
Edit: this is what the page looks like: https://i.stack.imgur.com/W5cUT.png
try this:
{row.map(lettera => {
console.log(row)
console.log(lettera)
return <Button onPress={()=>console.log(lettera)} title={lettera} color="cff3f2" />
})}
You also should install prettier to clean your syntax.
you have to write 'return' in map methods
like:
<>
<View style={styles.app}>
{puzzle.square.map(row =>(
return (<View >
{row.map( lettera =>(
return (<>
{console.log(row)}
{console.log(lettera)}
<Button onPress={console.log(lettera)} title={lettera} color="cff3f2"> </Button>
</>)
))}
</View>)
))}
</View>
</>
Description
Hello, I'm pretty new to React Native and I was trying to render a FlatList inside a ScrollView and I got an error mentioning this application of FlatList inside ScrollView is not proper and it may cause some scroll disorientations. So, I searched for solutions to this problem and found out there's ListHeaderComponent property for FlatList to render everything else inside ScrollView. I accomplished implementing this solution to my screen but now It doesn't respect to boundaries of SafeAreaView which is pretty annoying, I don't want to add hard-coded margin/padding to the outer ScrollView/View component. It wouldn't be pretty.
Current Implementation
screens/Home.js:
import React from 'react';
import {
View,
ScrollView,
StyleSheet,
Dimensions,
SafeAreaView
} from 'react-native';
import SearchBar from '../components/UI/SearchBar';
import CarouselSlider from '../components/UI/CarouselSlider';
import FeaturedProducts from '../components/UI/FeaturedProducts';
import RecommendedCategories from '../components/UI/RecommendedCategories';
import ProductList from '../components/UI/ProductList';
import { HeadingSecondary } from '../components/UI/Typography';
import CarouselSliderData from '../data/slider';
import MostSold from '../data/mostSold';
import Categories from '../data/categories';
const { width } = Dimensions.get('window');
const Home = props => {
const HeaderPart = (
<ScrollView>
<View style={styles.sectionSlider}>
<CarouselSlider
data={CarouselSliderData}
height={width*0.6}
width={width}
itemWidth={width - (width/5)}
/>
</View>
<View style={styles.sectionFeatured}>
<HeadingSecondary>Featured Products</HeadingSecondary>
<FeaturedProducts data={MostSold} />
</View>
<View style={styles.sectionRecommendedCategories}>
<HeadingSecondary>Recommended Categories For You</HeadingSecondary>
<RecommendedCategories data={Categories} />
</View>
<HeadingSecondary>Recommended Products For You</HeadingSecondary>
</ScrollView>
);
return (
<SafeAreaView style={styles.container}>
<SearchBar />
<View style={styles.sectionProducts}>
<ProductList
data={MostSold}
numColumns={2}
key={'Products'}
ListHeaderComponent={HeaderPart}
/>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center'
},
sectionSlider: {
height: width*0.6,
marginBottom: 12
}
});
export default Home;
components/UI/ProductList.js:
import React from 'react';
import {
View,
FlatList,
StyleSheet,
SafeAreaView
} from 'react-native';
import ProductItem from './ProductItem';
const ProductList = props => {
return (
<View style={styles.container}>
<FlatList
data={props.data}
renderItem={itemData =>
<ProductItem {...itemData.item} />
}
{...props}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1
}
});
export default ProductList;
Current Result Of Implementation
What I Want to Accomplish
Thanks in advance!
It seems like wrapping the FlatList with ListHeaderComponent/ListFooterComponent properties inside a View component is not correct. I have updated my code to below and it's solved.
screens/Home.js
...
const Home = props => {
...
return (
<SafeAreaView style={styles.container}>
<SearchBar />
<ProductList
data={MostSold}
numColumns={2}
key={'Products'}
ListHeaderComponent={HeaderPart}
/>
</SafeAreaView>
);
};
...
I am having a hard time using React StackNavigator, and passing parameters down to a screen. I am just in the stages of learning how React Native works, so maybe this is not the best practice so I am open to other suggestions if there is a better way.
function SetupsStack(props) {
console.log(props.route.params.Setup,"route is") // This has what I want
return (
<Stack.Navigator
initialRouteName="IndivdualSetup"
mode="card"
headerMode="screen"
>
<Stack.Screen
name="IndivdualSetup"
component={IndivualScreen}
//component={<IndividualScreen individual={props.route.params.Setup} />} thought this was it but its not
options={{
header: ({ navigation, scene }) => (
<Header
title="IndivdualSetup"
tabs
tabTitleSizeRight={10}
tabRightIcon={"shape-star"}
scene={scene}
navigation={navigation}
/>
),
}}
/>
</Stack.Navigator>
);
}
The component:
import React from "react";
import { ScrollView, StyleSheet, Dimensions } from "react-native";
import { Block, Text, theme } from "galio-framework";
const { width } = Dimensions.get("screen");
const thumbMeasure = (width - 48 - 32) / 3;
export default class IndivualScreen extends React.Component {
render() {
// const {
// navigation,
// route,
// } = this.props;
// const { product } = route.params;
console.log(this.props,"props are")
return (
<Block flex center>
<ScrollView
style={styles.components}
showsVerticalScrollIndicator={false}
>
<Block flex>
<Text bold size={30} style={styles.title}>
Text here
</Text>
</Block>
</ScrollView>
</Block>
);
}
}
The console log in this component does not have route as a parameter just navigation, but this only has has setParams (looks like the removed getParams in v5 and newer. However if I do:
component={<IndividualScreen individual={props.route.params.Setup} />}
I get:
Blockquote Error: Got an invalid value for 'component' prop for the screen 'IndivdualSetup'. It must be a valid React Component.
My syntax looks correct everywhere so not exactly sure what my problem is, or if it isn't working cause there is a better practice I should be following.
Thanks in advance!
instead of
component={<IndividualScreen individual={props.route.params.Setup} />}
you have to do this:
component={(props)=> <IndividualScreen individual={props.route.params.Setup} />}
Im building a sidebar menu, and im using react-navigation-drawer, heres the code:
const drawer = createDrawerNavigator({ //hooks
Home: { screen: Home_Stack, navigationOptions: {drawerIcon: <Entypo name = "home" size = {24} color = {"black"}></Entypo>}},
About: { screen: Slide_menu_stack}
});
export default createAppContainer(drawer);
and it looks like this:
I want home to be more closer to the icon, how can I do that?
you can create a custom drawer component like think
import { NavigationContainer } from '#react-navigation/native';
import {createDrawerNavigator,} from '#react-navigation/drawer';
const Drawer = createDrawerNavigator();
export function MyDrawer() {
return (
<NavigationContainer>
<Drawer.Navigator drawerContent={props => <CustomDrawerContent {...props} />}>
<Drawer.Screen name="Home" component={Home_Stack} />
<Drawer.Screen name="About" component={Slide_menu_stack} />
</Drawer.Navigator>
</NavigationContainer>
);
}
and coustomdrawer like this which I created
function CustomDrawerContent(props) {
return (
<View style={styles.container}>
<ScrollView>
{here you can style your drawer as you want}
</ScrollView>
</View>
)
}
I see the Android AppBar animating it's height while changing pages.
This is my AppBar.js:
import React from 'react';
import { Appbar as AppBarDefault } from 'react-native-paper';
import Logo from '../Logo';
const {
Header,
BackAction,
Content,
Action,
} = AppBarDefault;
export default class AppBar extends React.Component {
render() {
const { nav, pages, previous } = this.props;
return (
<Header statusBarHeight={Constants.statusBarHeight}>
{previous ? (
<BackAction onPress={() => nav.goBack()} />
) : (
<Action
icon="menu"
onPress={nav.openDrawer}
/>
)}
<Content
title={<Logo />}
style={{ alignItems: 'center' }}
/>
<Action icon="account-supervisor-circle" onPress={() => nav.navigate(pages.list)} />
</Header>
);
}
}
Is this the default behavior and can I prevent that?
I have also tried to use:
<Stack.Navigator {...getStackConfig(routes)} screenOptions={screenOptions}>
{routes.map((route) => (
<Stack.Screen
key={route.path}
name={route.page}
component={route.component}
options={{
title: route.message,
headerStyleInterpolator: HeaderStyleInterpolators.forFade,
headerStyle: {
height: Constants.statusBarHeight + REACT_PAPER_APPBAR_HEIGHT
},
...TransitionPresets.SlideFromRightIOS,
}}
/>
))}
</Stack.Navigator>
This enable slide from right (ios style), I hope it could solve the AppBar animation but I still have the animation of two AppBar while I want no animation on AppBar.
Is there a way to disable all AppBar animation on android ?
You can change cardStyleInterpolator in screenOptions:
Default for android is forRevealFromBottomAndroid you can changed it to others options:
<Stack.Navigator screenOptions={{
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS // what ever you want
}}>
...
</Stack.Navigator>
More options: https://reactnavigation.org/docs/stack-navigator/#cardstyleinterpolators