React Native: Dynamically change style with AsyncStorage and States - css

I want to implement dark mode and black mode in my app and the way I have it is that the user toggles on dark/black mode from one class in which I want the state to be updated to all the classes, the toggle class is as followed:
AppearanceToggle Class
state = {
BlackModeValue: null,
DarkModeValue: null
};
componentDidMount = () => {
AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
};
//AsyncStorage.setItem .........
render() {
return (
<ScrollView style={[ styles.View , this.state.DarkModeValue ? darkmode.ASView : null || this.state.BlackModeValue ? blackmode.ASView : null ]}>
<SettingsList borderColor='#c8c7cc' defaultItemSize={50}>
<SettingsList.Item
hasSwitch={true}
switchState={this.state.DarkModeValue}
switchOnValueChange={//Goes to asyncStorage.setItem method}
title='Dark Mode'
/>
<SettingsList.Item
hasSwitch={true}
switchState={this.state.BlackModeValue}
switchOnValueChange={//Goes to asyncStorage.setItem method}
title='Black Mode'
/>
</SettingsList>
</ScrollView>
);
}
}
And then in the class (which is SettingsScreen.js, this is the screen that navigates to AppearanceToggle ) that I want to .getItem and change the state is as followed:
state = {
switchValue: false,
rated: false,
DarkModeValue:null,
BlackModeValue:null,
};
componentDidMount = () => {
AsyncStorage.getItem('DarkModeValue').then(value => this.setState({ DarkModeValue: JSON.parse(value) }));
AsyncStorage.getItem('BlackModeValue').then(value => this.setState({ BlackModeValue: JSON.parse(value) }));
};
render() {
return (
<ScrollView style={[ styles.View , this.state.DarkModeValue ? styles.DMView : null || this.state.BlackModeValue ? styles.BMView : null ]}>
..........
</ScrollView>
The problem I have is that when I change the switch, it affects the AppearanceToggleScreen Class instantly but not the SettingsScreen UNLESS I refresh the app. Is there a way to do it so all of them get affected instantly?

Perhaps the best way to propagate it is to listen for the changes in your AppComponent using Context or root component. e.g.
So you would create a theme context like :
export const themes = {
blackMode: {
foreground: '#000000',
background: '#eeeeee',
},
darkMode: {
foreground: '#2f4f4ff',
background: '#222222',
},
};
export const ThemeContext = React.createContext(
themes.darkMode // default value
)
;
Your AppearanceToggle class would have something like :
import {ThemeContext} from './theme-context';
class ThemedButton extends Component {
render() {
let props = this.props;
let theme = this.context;
return (
<button
{...props}
style={{backgroundColor: theme.background}}
/>
);
}
}
ThemedButton.contextType = ThemeContext;
export default ThemedButton;
And then your AppComponent could be
import {ThemeContext, themes} from './theme-context';
import ThemedButton from './themed-button';
function Toolbar(props) {
// Render your customized toolbar here and bind the changeTheme function to it
}
class App extends Component {
constructor(props) {
super(props);
};
componentDidMount = () => {
AsyncStorage.getItem('selectedTheme').then(value => this.setState({ selectedTheme: JSON.parse(value) }));
};
this.toggleTheme = () => {
this.setState(state => ({
theme:
state.theme === themes.darkMode
? themes.blackMode
: themes.darkMode,
}));
};
}
render() {
// The ThemedButton button inside the ThemeProvider
// uses the theme from state while the one outside uses
// the default dark theme
return (
<Page>
<ThemeContext.Provider value={this.state.theme}>
<Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>
<Section>
<ThemedButton />
</Section>
</Page>
);
}
}
For more read

The thing is that in the AppearanceToggleScreen you're changing the state, therefore the component is rerendered (with the new theme), but because the SettingsScreen is already in the navigation stack (because that's where you're navigating from) the componentDidMount is not executing again.
Now, maybe you want to use the Context API to access globally to the values, or do something like this.

Related

Navgigation.navigate(param) with PushNotification in react native and react navigation

I want to redirect my user on the page I choose when they click on my push notification. I know how to get parameters from firebase.
Push Notification package : https://github.com/zo0r/react-native-push-notification
React navigation : https://reactnavigation.org/docs/getting-started/
Index.tsx :
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import PushNotification from "react-native-push-notification";
import { useNavigation } from '#react-navigation/native';
PushNotification.configure({
onNotification: function (notification) {
console.log(notification)
screenToRedirect = notification.data.screen //from firebase key => value
//here I'd like to do something like this :
const navigation = useNavigation();
navigation.navigate(screenToRedirect )
},
requestPermissions: Platform.OS === 'ios'
});
AppRegistry.registerComponent(appName, () => App);
It tells me:
Invalid hook call. Hooks can only be called inside of the body of a function component. Problem : I can't put the PushNotification.configure inside a component (it is mentioned in the doc).
You can't use hooks outside react components. You can try this solution: https://reactnavigation.org/docs/navigating-without-navigation-prop/
SOLUTION
I just added my principal menu in the root navigation. So the navigationRef return my principal menu, example :
export const Drawer = createDrawerNavigator();
export const MyDrawer = () => {
return(
<Drawer.Navigator initialRouteName="Accueil">
<Drawer.Screen name="Accueil" component={Home} />
<Drawer.Screen name="Qui sommes-nous ?" component={Who} />
<Drawer.Screen name="Nos Services" component={Services} />
<Drawer.Screen name="Nos Biens" component={Bien} />
</Drawer.Navigator>
)
}
export const Bottom = createBottomTabNavigator();
export const MyBottom = () => {
return(
<Bottom.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'folder';
} else if (route.name === 'Mon Profil') {
iconName = focused ? 'alert-circle' : 'aperture-sharp';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Bottom.Screen name="Home" component={MyDrawer} options={{ headerShown: false }}/>
<Bottom.Screen name="Mon Profil" component={Profil} options={{ headerShown: false }}/>
</Bottom.Navigator>
)
}
export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
const RootStack = createNativeStackNavigator();
export default function AppMenu() {
return (
<NavigationContainer ref={navigationRef} independent={true}>
<RootStack.Navigator initialRouteName="Accueil">
// Here, I return My Bottom which is the principal menu that return itself MyDrawer menu
<RootStack.Screen name="Home2" component={MyBottom} options={{ headerShown: false }}/>
</RootStack.Navigator>
</NavigationContainer>
);
}
And now My App.tsx return AppMenu.
Here's how I solved this problem:
1- First create a RootNavigation,js file
2- Add the below code in that file
import {createNavigationContainerRef} from '#react-navigation/native';
export const navigationRef = createNavigationContainerRef();
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}
3- Add navigationRef in navigation container
import {navigationRef} from './RootNavigation';
<NavigationContainer ref={navigationRef}>
<MainStack />
</NavigationContainer>
4- Now you can use this ref outside of NavigationContainer as well if you have initialized your push notifications in app.js
import * as RootNavigation from './src/navigation/RootNavigation';
***if you are using one signal for push notifications then you can navigate to your screen in setNotificationOpenedHandler method***
//Method for handling notifications opened
OneSignal.setNotificationOpenedHandler(notification => {
RootNavigation.navigate("your_screen_name");
});

this.props.route.params returns value as undefined

I'm building a barcode reader app that scans that qr code and then takes data and is used as a key to fetch an object from firebase. In order the data to be used as a key I need to pass through another screen but when I check console log it's cameback that the scanned key is undefined.
The itself barcode scanner works perfectly.
Barcode class :
export class BarCodeScannerScreen extends Component{
state = {
CameraPermissionGranted: null,
}
async componentDidMount() {
// Ask for camera permission
const { status } = await Permissions.askAsync(Permissions.CAMERA);
this.setState({ CameraPermissionGranted: status === "granted" ? true : false });
};
barCodeScanned = ({ data }) => {
//Access the Data
alert(data); // shows the scanned key
this.props.navigation.navigate('Info', {
item: data, }); // but then it's dissapears in here.
};
render(){
const { CameraPermissionGranted } = this.state;
if(CameraPermissionGranted === null){
// Request Permission
return(
<View style={styles.container}>
<Text>Please grant Camera permission</Text>
</View>
);
}
if(CameraPermissionGranted === false){
// Permission denied
return (
<View style={styles.container}>
<Text>Camera Permission Denied.</Text>
</View>
);
}
if(CameraPermissionGranted === true){
// Got the permission, time to scan
return (
<View style = {{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<BarCodeScanner
onBarCodeScanned = {this.barCodeScanned }
style = {{
height: DEVICE_HEIGHT/1.1,
width: DEVICE_WIDTH,
}}
>
</BarCodeScanner>
</View>
);
}
}
}
Here is my Info screen that receives the information :
export default class InfoScreen extends Component {
constructor(props){
super(props);
this.state={
productlist:[],
scannedkey: this.props.route.params.item
} }
async componentDidMount(){
firebase.database().ref(`product/${ this.state.scannedkey}`).on(
"value",
(snapshot) => {
var list = [];
snapshot.forEach((child) => {
list.push({
key: child.key,
title: child.val().title,
//details: child.val().details,
//price: child.val().price
});
});
this.setState({ productlist: list });
},
(error) => console.error(error)
);
}
componentWillUnmount() {
if (this.valuelistener_) {
this.valueRef_.off("value", this.valuelistener_)
}}
render() {
console.log(this.state.scannedkey); // console log shows that scanned key is undefined
return(
<View style={styles.container}>
<Text>Hey</Text>
<Text>{this.state.productlist.title}</Text>
</View>
);}}
App.js
export default function App() {
const Drawer=createDrawerNavigator();
return (
<Provider store={store}>
<NavigationContainer>
<Drawer.Navigator initialRouteName="Barcode">
<Drawer.Screen name="Barcode" component={BarCodeScannerScreen} />
<Drawer.Screen name="Info" component={InfoScreen} />
</Drawer.Navigator>
</NavigationContainer>
</Provider>
);
}
I ussualy use function components to navigate through but with class components it's a little tricky for me. Perhaps I missed something?
So far I 've tried :
this.props.navigation.navigate('Info', {
item: JSON.stringify(data) , });
And it didn't work.
I will be grateful for your help.
Try to use item directly from props, not from state
in your componentDidMount call where you supply from state the scannedKey, supply it from props
firebase.database().ref(`product/${this.props.route.params.item}`)....
you are also calling this.props instead of props directly in your state inside your constructor, which have direct access to it, that's why you can call super(props) and not super(this.props), I am not sure if this is the issue, but in react docs says don't copy props to state because they get ignored, and it's bad practice my friend.
check this link, in the big yellow note what I am reffering to
https://reactjs.org/docs/react-component.html#constructor

Rendering Admob Banner within react native flatlist items

I have integrated react-native-firebase and the AdMob module into my react native project and everything is working as expected (test ads and ads in production). I now want to add banners within my Flatlist (rendering a banner every X number of rows).
this is an example of the data I'm receiving from the server:
[
{
...item 1 details
},{
...item 2 details
},{
...ad details
},{
...item 3 details
},{
...item 4 details
},{
...ad details
}
]
and this is the Flatlist component
class ItemsList extends React.Component {
_renderItem = ({item, index}) => {
if (item.isAd) {
const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
const keyWords = item.admobKeywords || [];
keyWords.forEach(keyword => {
request.addKeyword(keyword);
});
return (
<View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
<Banner
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
the problem is that whenever a scroll event happens (user scrolls down), the Flatlist keeps re-rendering the banner (firing a new request) and the banner keeps refreshing. After a while, a lot of requests get fired and the application crashes!
I know that calling a network request inside a renderItem method is not a good practice so I also tried the following but the problem is still the same:
const Banner = firebase.admob.Banner;
const AdRequest = firebase.admob.AdRequest;
const request = new AdRequest();
class CatalogueSalesList extends React.Component {
_renderItem = ({item, index}) => {
if (item.isAd) {
const unitId = Platform.OS === "ios" ? item.adIdIOS : item.adIdAndroid;
const keyWords = item.admobKeywords || [];
keyWords.forEach(keyword => {
request.addKeyword(keyword);
});
return (
<View style={{ width:"100%", height: item.adHeight || "auto", marginTop: 5, marginBottom: 15, alignItems: 'center', justifyContent: 'center' }}>
<Banner
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
Can someone please provide me with a solution to how a banner ad could be implemented inside a Flatlist without the banner getting re-rendered every time the user scrolls through the list?
the version that I'm using:
"react-native": "0.59.9",
"react-native-firebase": "~5.5.3"
Flatlist component contains onScroll event hooks you can use to determine when and what type of scrolling is happening:
onScrollBeginDrag, onScrollEndDrag,onMomentumScrollBegin, onMomentumScrollEnd
Use these and make your banner component/list item a stateful component.
The code below will render your admob stuff (and it's associated network requests) only when user is not scrolling and only once.
If your banner component is straight from admob, then wrap it in a stateful component and do the same as below.
List Parent Component
class CatalogueSalesList extends React.Component {
constructor() {
this.state = {
isDragging: false,
isGliding: false,
}
_renderItem = ({item, index}) => {
return (
<View>
<Banner
isDragging={this.state.isDragging}
isGliding={this.state.isGliding}
size={item.adSize}
request={request.build()}
unitId={unitId}
onAdLoaded={() => {}}
/>
</View>
)
} else {
renderItem()
}
}
render() {
return(
<View>
<FlatList
onScrollBeginDrag={
() => {this.setState({isDragging: true});}
}
onScrollEndDrag={
() => {this.setState({isDragging: false});}
}
onMomentumScrollBegin={
() => {this.setState({isGliding: true});}
}
onMomentumScrollEnd={
() => {this.setState({isGliding: false});}
}
data={this.state.data}
renderItem={this._renderItem}
...
/>
</View>
)
};
};
Banner.tsx
class Banner extends React.Component {
constructor(props) {
super(props)
this.state = {
shouldRenderAd: false,
}
}
componentDidMount() {
if (!this.props.isGliding && !this.props.isDragging) {
this.setState({
shouldRenderAd: true,
});
}
}
shouldComponentUpdate(nextProps: Props): boolean {
if (this.state.shouldRenderAd) {
// if it has already rendered the ad, don't re-render
return false;
} else if (!nextProps.isDragging && !nextProps.isGliding) {
// if stationary, ok to re-render
return true;
} else if (nextProps.isDragging && !nextProps.isGliding) {
// if dragging, but not gliding, ok to re-render
return true;
} else {
// otherwise (it is gliding) don't re-render
return false;
}
}
componentDidUpdate() {
if (!this.props.isGliding && !this.props.isDragging) {
// if no scrolling is happening
this.setState({
shouldRenderAd: true,
});
}
}
render() {
if (this.state.shouldRenderAd) {
return (
// render your admob (network requests) stuff here
);
} else {
return (
// Placeholder component for your ad
// probably an empty view the same dimensions as the ad banner
);
}
}
}

Access Event Of Component That Is Passed As Prop

I pass a React Component as a Prop to a child.
That component has an event.
In child component, I want to get access to that event and bind it to a method inside child. How can I do that ?
I often use Semantic-UI React Modal as following:
class Example extends Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
}
}
handleOpen = () => this.setState({ modalOpen: true })
handleClose = () => this.setState({ modalOpen: false })
render(){
return(
<Modal
onClose={this.handleClose}
open={this.state.modalOpen}
trigger={<Button onClick={this.handleOpen}>Gandalf</Button>}>
<Modal.Header>Balrog</Modal.Header>
<Modal.Content>
<h1>You shall not pass!</h1>
{/*
Some form that closes Modal on success
onSuccess : this.handleClose
*/}
<Button onClick={this.handleClose}>Grrrrr</Button>
</Modal.Content>
</Modal>
)
}
}
export default Example
Now I want to make it reusable
import React, { Component } from 'react'
import { Modal } from 'semantic-ui-react'
class ReusableModal extends Component {
constructor(props) {
super(props);
this.state = {
modalOpen: false
}
}
handleOpen = () => this.setState({ modalOpen: true })
handleClose = () => this.setState({ modalOpen: false })
render(){
return(
<Modal
onClose={() => this.handleClose}
open={this.state.modalOpen}
{/*
How to access onClick event on trigger prop content ?
this.prop.trigger can be a Button or a Menu.Item
*/}
{...this.props}>
{this.props.children}
</Modal>
)
}
}
How can I have access to the trigger prop Component and bind its onClick event to handleOpen method ?
Edit :
to be more precise here is what I'm looking for
<ChildComponent trigger={<Button>This button should fire a function defined in child component</Button>} />
ChildComponent extends Component {
functionToCall = () => { console.log('hello') }
// I would like to :
// let myButton = this.props.trigger
// myButton.onClick = functionToCall
}
In React, data flows from parent to child. If there are multiple child components that have events that need to trigger changes in parent component you must fire callback function in child component.
Parent component:
handleOpen = () => { // do something }
(...)
<childComponent onClickCallback={this.handleOpen}
And in child component:
<button onClick={this.props.onClickCallback}> Click to close</button>
Pass this.handleOpen as a prop and call it as a prop in child component, and it will trigger function in the parent component, where you can handle data however you want.
Is this what you asked for?
The key here is to clone element
ChildComponent extends Component {
functionToCall = () => { console.log('hello') }
this.Trigger = React.cloneElement(
this.props.trigger,
{ onClick: this.functionToCall }
)
}

React Native: Different styles applied on orientation change

I'm developing a React Native application to be deployed as a native application on iOS and Android (and Windows, if possible).
The problem is that we want the layout to be different depending on screen dimensions and its orientation.
I've made some functions that return the styles object and are called on every component render's function, so I am able to apply different styles at application startup, but if the orientation (or screen's size) changes once the app has been initialized, they aren't recalculated nor reapplied.
I've added listeners to the top rendered so it updates its state on orientation change (and it forces a render for the rest of the application), but the subcomponents are not rerendering (because, in fact, they have not been changed).
So, my question is: how can I make to have styles that may be completely different based on screen size and orientation, just as with CSS Media Queries (which are rendered on the fly)?
I've already tried react-native-responsive module without luck.
Thank you!
If using Hooks. You can refer to this solution: https://stackoverflow.com/a/61838183/5648340
The orientation of apps from portrait to landscape and vice versa is a task that sounds easy but may be tricky in react native when the view has to be changed when orientation changes. In other words, having different views defined for the two orientations can be achieved by considering these two steps.
Import Dimensions from React Native
import { Dimensions } from 'react-native';
To identify the current orientation and render the view accordingly
/**
* Returns true if the screen is in portrait mode
*/
const isPortrait = () => {
const dim = Dimensions.get('screen');
return dim.height >= dim.width;
};
/**
* Returns true of the screen is in landscape mode
*/
const isLandscape = () => {
const dim = Dimensions.get('screen');
return dim.width >= dim.height;
};
To know when orientation changes to change view accordingly
// Event Listener for orientation changes
Dimensions.addEventListener('change', () => {
this.setState({
orientation: Platform.isPortrait() ? 'portrait' : 'landscape'
});
});
Assembling all pieces
import React from 'react';
import {
StyleSheet,
Text,
Dimensions,
View
} from 'react-native';
export default class App extends React.Component {
constructor() {
super();
/**
* Returns true if the screen is in portrait mode
*/
const isPortrait = () => {
const dim = Dimensions.get('screen');
return dim.height >= dim.width;
};
this.state = {
orientation: isPortrait() ? 'portrait' : 'landscape'
};
// Event Listener for orientation changes
Dimensions.addEventListener('change', () => {
this.setState({
orientation: isPortrait() ? 'portrait' : 'landscape'
});
});
}
render() {
if (this.state.orientation === 'portrait') {
return (
//Render View to be displayed in portrait mode
);
}
else {
return (
//Render View to be displayed in landscape mode
);
}
}
}
As the event defined for looking out the orientation change uses this command ‘this.setState()’, this method automatically again calls for ‘render()’ so we don’t have to worry about rendering it again, it’s all taken care of.
Here's #Mridul Tripathi's answer as a reusable hook:
// useOrientation.tsx
import {useEffect, useState} from 'react';
import {Dimensions} from 'react-native';
/**
* Returns true if the screen is in portrait mode
*/
const isPortrait = () => {
const dim = Dimensions.get('screen');
return dim.height >= dim.width;
};
/**
* A React Hook which updates when the orientation changes
* #returns whether the user is in 'PORTRAIT' or 'LANDSCAPE'
*/
export function useOrientation(): 'PORTRAIT' | 'LANDSCAPE' {
// State to hold the connection status
const [orientation, setOrientation] = useState<'PORTRAIT' | 'LANDSCAPE'>(
isPortrait() ? 'PORTRAIT' : 'LANDSCAPE',
);
useEffect(() => {
const callback = () => setOrientation(isPortrait() ? 'PORTRAIT' : 'LANDSCAPE');
Dimensions.addEventListener('change', callback);
return () => {
Dimensions.removeEventListener('change', callback);
};
}, []);
return orientation;
}
You can then consume it using:
import {useOrientation} from './useOrientation';
export const MyScreen = () => {
const orientation = useOrientation();
return (
<View style={{color: orientation === 'PORTRAIT' ? 'red' : 'blue'}} />
);
}
You can use the onLayout prop:
export default class Test extends Component {
constructor(props) {
super(props);
this.state = {
screen: Dimensions.get('window'),
};
}
getOrientation(){
if (this.state.screen.width > this.state.screen.height) {
return 'LANDSCAPE';
}else {
return 'PORTRAIT';
}
}
getStyle(){
if (this.getOrientation() === 'LANDSCAPE') {
return landscapeStyles;
} else {
return portraitStyles;
}
}
onLayout(){
this.setState({screen: Dimensions.get('window')});
}
render() {
return (
<View style={this.getStyle().container} onLayout = {this.onLayout.bind(this)}>
</View>
);
}
}
}
const portraitStyles = StyleSheet.create({
...
});
const landscapeStyles = StyleSheet.create({
...
});
Finally, I've been able to do so. Don't know the performance issues it can carry, but they should not be a problem since it's only called on resizing or orientation change.
I've made a global controller where I have a function which receives the component (the container, the view) and adds an event listener to it:
const getScreenInfo = () => {
const dim = Dimensions.get('window');
return dim;
}
const bindScreenDimensionsUpdate = (component) => {
Dimensions.addEventListener('change', () => {
try{
component.setState({
orientation: isPortrait() ? 'portrait' : 'landscape',
screenWidth: getScreenInfo().width,
screenHeight: getScreenInfo().height
});
}catch(e){
// Fail silently
}
});
}
With this, I force to rerender the component when there's a change on orientation, or on window resizing.
Then, on every component constructor:
import ScreenMetrics from './globalFunctionContainer';
export default class UserList extends Component {
constructor(props){
super(props);
this.state = {};
ScreenMetrics.bindScreenDimensionsUpdate(this);
}
}
This way, it gets rerendered everytime there's a window resize or an orientation change.
You should note, however, that this must be applied to every component which we want to listen to orientation changes, since if the parent container is updated but the state (or props) of the children do not update, they won't be rerendered, so it can be a performance kill if we have a big children tree listening to it.
Hope it helps someone!
I made a super light component that addresses this issue.
https://www.npmjs.com/package/rn-orientation-view
The component re-renders it's content upon orientation change.
You can, for example, pass landscapeStyles and portraitStyles to display these orientations differently.
Works on iOS and Android.
It's easy to use. Check it out.
React Native also have useWindowDimensions hooks that returns the width and height of your device.
With this, you can check easily if the device is in 'Portrait' or 'Landscape' by comparing the width and height.
See more here
I had the same problem. After the orientation change the layout didn't change.
Then I understood one simple idea - layout should depend on screen width that should be calculated inside render function, i.e.
getScreen = () => {
return Dimensions.get('screen');
}
render () {
return (
<View style={{ width: this.getScreen().width }>
// your code
</View>
);
}
In that case, the width will be calculated at the moment of render.
** I am using this logic for my landscape and portrait Logic.**
** by this if I launch my app in landscape first I am getting the real height of my device. and manage the hight of the header accordingly.**
const [deviceOrientation, setDeviceOrientation] = useState(
Dimensions.get('window').width < Dimensions.get('window').height
? 'portrait'
: 'landscape'
);
const [deviceHeight, setDeviceHeight] = useState(
Dimensions.get('window').width < Dimensions.get('window').height
? Dimensions.get('window').height
: Dimensions.get('window').width
);
useEffect(() => {
const setDeviceHeightAsOrientation = () => {
if (Dimensions.get('window').width < Dimensions.get('window').height) {
setDeviceHeight(Dimensions.get('window').height);
} else {
setDeviceHeight(Dimensions.get('window').width);
}
};
Dimensions.addEventListener('change', setDeviceHeightAsOrientation);
return () => {
//cleanup work
Dimensions.removeEventListener('change', setDeviceHeightAsOrientation);
};
});
useEffect(() => {
const deviceOrientation = () => {
if (Dimensions.get('window').width < Dimensions.get('window').height) {
setDeviceOrientation('portrait');
} else {
setDeviceOrientation('landscape');
}
};
Dimensions.addEventListener('change', deviceOrientation);
return () => {
//cleanup work
Dimensions.removeEventListener('change', deviceOrientation);
};
});
console.log(deviceHeight);
if (deviceOrientation === 'landscape') {
return (
<View style={[styles.header, { height: 60, paddingTop: 10 }]}>
<TitleText>{props.title}</TitleText>
</View>
);
} else {
return (
<View
style={[
styles.header,
{
height: deviceHeight >= 812 ? 90 : 60,
paddingTop: deviceHeight >= 812 ? 36 : 10
}
]}>
<TitleText>{props.title}</TitleText>
</View>
);
}
I have, by far, had the most success with this library: https://github.com/axilis/react-native-responsive-layout
It does what you are asking for and a lot more. Simple Component implementation without hardly any logic like some of the more complex answers above. My project is using Phone, Tablet, and web via RNW - and the implementation is flawless. Additionally when resizing the browser it's truly responsive, and not just on initial rendering - handling phone orientation changes flawlessly.
Example code (Put any components as children of blocks):
<Grid>
<Section> {/* Light blue */}
<Block xsSize="1/1" smSize="1/2" />
<Block xsSize="1/1" smSize="1/2" />
<Block xsSize="1/1" smSize="1/2" />
</Section>
<Section> {/* Dark blue */}
<Block size="1/1" smSize="1/2" />
<Block size="1/1" smSize="1/2" />
<Block size="1/1" smSize="1/2" />
<Block size="1/1" smSize="1/2" />
<Block size="1/1" smSize="1/2" />
</Section>
</Grid>
To give this:
I have written a HoC solution for my expo SDK36 project, it support orientation change and pass props.orientation based on ScreenOrientation.Orientation value.
import React, { Component } from 'react';
import { ScreenOrientation } from 'expo';
export default function withOrientation(Component) {
class DetectOrientation extends React.Component {
constructor(props) {
super(props);
this.state = {
orientation: '',
};
this.listener = this.listener.bind(this);
}
UNSAFE_componentWillMount() {
this.subscription = ScreenOrientation.addOrientationChangeListener(this.listener);
}
componentWillUnmount() {
ScreenOrientation.removeOrientationChangeListener(this.subscription);
}
listener(changeEvent) {
const { orientationInfo } = changeEvent;
this.setState({
orientation: orientationInfo.orientation.split('_')[0],
});
}
async componentDidMount() {
await this.detectOrientation();
}
async detectOrientation() {
const { orientation } = await ScreenOrientation.getOrientationAsync();
this.setState({
orientation: orientation.split('_')[0],
});
}
render() {
return (
<Component
{...this.props}
{...this.state}
onLayout={this.detectOrientation}
/>
);
}
}
return (props) => <DetectOrientation {...props} />;
}
To achieve a more performant integration, I used the following as a superclass for each of my react-navigation screens:
export default class BaseScreen extends Component {
constructor(props) {
super(props)
const { height, width } = Dimensions.get('screen')
// use this to avoid setState errors on unmount
this._isMounted = false
this.state = {
screen: {
orientation: width < height,
height: height,
width: width
}
}
}
componentDidMount() {
this._isMounted = true
Dimensions.addEventListener('change', () => this.updateScreen())
}
componentWillUnmount() {
this._isMounted = false
Dimensions.removeEventListener('change', () => this.updateScreen())
}
updateScreen = () => {
const { height, width } = Dimensions.get('screen')
if (this._isMounted) {
this.setState({
screen: {
orientation: width < height,
width: width, height: height
}
})
}
}
Set any root components to extend from this component, and then pass the screen state to your leaf/dumb components from the inheriting root components.
Additionally, to keep from adding to the performance overhead, change the style object instead of adding more components to the mix:
const TextObject = ({ title }) => (
<View style={[styles.main, screen.orientation ? styles.column : styles.row]}>
<Text style={[styles.text, screen.width > 600 ? {fontSize: 14} : null ]}>{title}</Text>
</View>
)
const styles = StyleSheet.create({
column: {
flexDirection: 'column'
},
row: {
flexDirection: 'row'
},
main: {
justifyContent: 'flex-start'
},
text: {
fontSize: 10
}
}
I hope this helps anyone in the future, and you'll find it to be quite optimal in terms of overhead.
I'm using styled-components, and this is how I re-render the UI on orientation change.
import React, { useState } from 'react';
import { View } from 'react-native';
import { ThemeProvider } from 'styled-components';
import appTheme from 'constants/appTheme';
const App = () => {
// Re-Layout on orientation change
const [theme, setTheme] = useState(appTheme.getTheme());
const onLayout = () => {
setTheme(appTheme.getTheme());
}
return (
<ThemeProvider theme={theme}>
<View onLayout={onLayout}/>
{/* Components */}
</ThemeProvider>
);
}
export default App;
Even if you're not using styled-components, you can create a state and update it on onLayout to re-render the UI.
This is my solution:
const CheckOrient = () => {
console.log('screenHeight:' + Dimensions.get('screen').height + ', screenWidth: ' + Dimensions.get('screen').width);
}
return ( <
View onLayout = {
() => CheckOrient()
} >
............
<
/View>
Note for the case with a pure component. #mridul-tripathi answer works correctly, but if a pure component is used, then probably only parent/top-level component reacting to orientation change is not enough. You will also need to update a pure component separately on orientation change.
All you need is:
import { useWindowDimensions } from 'react-native';
export default function useOrientation() {
const window = useWindowDimensions();
return window.height >= window.width ? 'portrait' : 'landscape';
}
You need useWindowDimensions
This hook re-render component when dimension change and apply styles but Dimensions object can't re-render component and change style, it just work in first render
import { useWindowDimensions } from 'react-native';
then destructure it
const { height, width } = useWindowDimensions();
and final you can do like this
import React from "react";
import { View, StyleSheet, useWindowDimensions } from "react-native";
const App = () => {
const { height, width } = useWindowDimensions();
const isPortrait = height > width;
return (
<View style={isPortrait ? styles.portrait : styles.landscape}>
{/* something */}
</View>
);
};
const styles = StyleSheet.create({
portrait: {},
landscape: {},
});
export default App;
also you can use scale property
const { scale } = useWindowDimensions();
read this document
https://reactnative.dev/docs/usewindowdimensions

Resources