redux-persist autoRehydrate not defined in new version - react-native

I'm newby to Redux. I was trying to persist data on local storage through redux-persist. I followed the tutorial and the data stored in storage as below.
import {createStore, applyMiddleware, compose} from 'redux';
import {AsyncStorage} from 'react-native';
import {persistStore, autoRehydrate} from 'redux-persist';
import reducer from '../reducer';
var defaultState = {
todos: []
};
exports.configureStore = (initialState=defaultState) => {
var store = createStore(reducer, initialState, compose(
autoRehydrate()
));
persistStore(store, {storage: AsyncStorage});
return store;
}
And here is my App.js.
import React, { Component } from 'react';
import {Provider} from 'react-redux';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import Main from './app/components/Main';
import {configureStore} from './app/store';
export default class App extends Component<Props> {
render() {
return (
<Provider store={configureStore()}>
<Main/>
</Provider>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
But I guess, there is new update in redux-persist. So, with this code I get the error like below.
As I understand, within new update there is no more autoRehydrate. But I can't handle, how to update the code so it works with new version. Can you help me, please?

Related

Splash screen rendering nothing instead of animation

I'm building a React Native application in expo, and am trying to use a gif file for a splash animation. I've configured my code as follows using expo-splash-screen, however nothing is rendered when I try to load the app. Any suggestions?
Here's the root of my app App.js
import 'react-native-gesture-handler';
import React, { useCallback,useState } from 'react'
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { MyStack } from './routes/homeStack';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen'
import * as Sentry from 'sentry-expo';
import Splash from './components/Splash';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [appIsReady, setAppIsReady] = useState(false);
const [ fontsLoaded ] = useFonts({
'Sofia-Pro': require('./assets/Sofia_Pro_Regular.otf'),
'Helvetica-Neue': require('./assets/HelveticaNeue-Medium.otf')
})
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return <Splash/>
}
return (
<NavigationContainer onLayout={onLayoutRootView}>
<MyStack/>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
And here's my splash animation component Splash.tsx
import React from 'react'
import { Image,StyleSheet,View } from 'react-native'
const Splash = () => {
return (
<View style = {styles.container}>
<Image
style = {styles.image}
source ={require('../assets/splash_animation.gif')}
/>
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
image: {
width: '100%',
height: '100%',
resizeMode: 'contain',
},
});
export default Splash

How to fix withAuthenticator(App) Render Error

I installed #react-native-picker/picker and everything in my app was functioning correctly. When I implemented Auth and changed the export from export default App to export default withAuthenticator(App);
it broke and I have been receiving a Render Error saying that Picker has been removed from react. This happens regardless of if I import Picker or I delete Picker. enter image description here
import 'react-native-gesture-handler';
import React, {useState} from 'react';
import { StyleSheet, SafeAreaView} from 'react-native';
import Navigation from './src/navigation/index';
import { withAuthenticator } from 'aws-amplify-react-native';
import Amplify from '#aws-amplify/core';
import awsconfig from './src/aws-exports';
Amplify.configure(awsconfig);
const App = () => {
return (
<SafeAreaView style={{flex:1}}>
<Navigation />
</SafeAreaView>
);
};
const styles = StyleSheet.create({
root: {
flex: 1,
},
pageContainer: {
justifyContent: 'center',
alignItems: 'center',
flex: 1,
},
topNavigation: {
flexDirection: 'row',
justifyContent: 'space-around',
width: '100%',
padding: 10,
},
});
export default withAuthenticator(App);

Could not find "store" in context of "Connect(Login)" , and I could't find a solution for it here is my code

//App.js
import React, { Component } from 'react';
import { StyleSheet, Platform, Image, Text, View } from 'react-native';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducers/index';
import Profile from './Screens/Profile';
import Signup from './Screens/Signup';
import Login from './Screens/Login';
const middleware = applyMiddleware(thunkMiddleware);
const store = createStore(rootReducer, middleware);
import { ReactReduxContext } from "react-redux";
const Switch = createSwitchNavigator({
Login: Login,
Profile: Profile,
Signup: Signup
}, {
initialRouteName: 'Login',
});
export default createAppContainer(Switch)
class App extends React.Component {
render() {
return (
<Provider>
<Switch />
</Provider>
)
}
}
//Login.js
import React from 'react';
import Firebase from '../config/firebase';
import Signup from '../Screens/Signup';
import Profile from '../Screens/Profile';
import { createSwitchNavigator } from 'react-navigation';
import { View, TextInput, StyleSheet, TouchableOpacity, Text, Button } from 'react-native';
import ReactReduxContext from 'react-redux';
import { bindActionCreators, applyMiddleware, createStore, Provider } from 'redux';
import { connect } from 'react-redux';
import { updateEmail, updatePassword, login } from '../actions/user';
import thunkMiddleware from 'redux-thunk';
function mapDispatchToProps(dispatch) {
return bindActionCreators({ login, updateEmail, updatePassword }, dispatch)
}
const mapStateToProps = state => {
return {
user: user.state
}
}
class Login extends React.Component {
handle = () => {
this.props.login()
this.props.navigation.navigate('Profile')
}
state = {
email: '',
password: ''
}
render() {
return (
<Provider>
<View style={styles.container}>
<TextInput
style={styles.inputBox}
value={this.state.email}
onChangeText={email => this.props.updateEmail(email)}
placeholder='Email'
autoCapitalize='none'
/>
<TextInput
style={styles.inputBox}
value={this.state.password}
onChangeText={password => this.props.updatePassword(password)}
placeholder='Password'
secureTextEntry={true}
/>
<TouchableOpacity style={styles.button} onPress={this.handleLogin}>
<Text style={styles.buttonText}>Login</Text>
</TouchableOpacity>
<Button title="Don't have an account yet? Sign up"
onPress={() => this.props.navigation.navigate('Signup')} />
</View>
</Provider>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center'
},
inputBox: {
width: '85%',
margin: 10,
padding: 15,
fontSize: 16,
borderColor: '#d3d3d3',
borderBottomWidth: 1,
textAlign: 'center'
},
button: {
marginTop: 30,
marginBottom: 20,
paddingVertical: 5,
alignItems: 'center',
backgroundColor: '#F6820D',
borderColor: '#F6820D',
borderWidth: 1,
borderRadius: 5,
width: 200
},
buttonText: {
fontSize: 20,
fontWeight: 'bold',
color: '#fff'
},
buttonSignup: {
fontSize: 12
}
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(Login);
In order to access the connect HOC, you first need to provide the store to the UI tree via the Provider
You can do it like this:
class App extends React.Component {
render() {
return (
<Provider store={store}> // this is what is required.
<Switch />
</Provider>
)
}
}
Hope this helps. Cheers!

Cannot override default Amplify withAuthenticator style with custom theme

I am trying to customize the styling of the AWS WithAuthenticator HOC in my React Native application. I followed the Amplify documentation step by step. However, the app keeps rendering the default styling (orange buttons) instead of the expected custom color.
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Amplify from '#aws-amplify/core';
import config from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';
import { AmplifyTheme } from 'aws-amplify-react-native';
// custom colors for components
const Mybutton = Object.assign({}, AmplifyTheme.button, { backgroundColor: '#000', });
//console.log('My own design: ', Mybutton)
const MyTheme = Object.assign({}, AmplifyTheme, { button: Mybutton });
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>You are now signed in!</Text>
</View>
);
}
}
export default withAuthenticator(App, { includeGreetings: true }, false, [], null, MyTheme)
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
Can anyone point me to what am I doing wrong?
You need to pass the withAuthenticator call like this:
export default withAuthenticator(App, {includeGreetings: true, theme: MyTheme});
Then it will work.

In React Native, how to import another stylesheet into current one?

I'm a novice.
Now i have to managing two or more stylesheet files in my project.
My current stylesheet code:
'use strict';
import { Platform } from 'react-native'
var React = require('react-native');
var {StyleSheet,} = React;
import {NavBar, TabBar} from './UiConfig'
import MyComponents from './styles/MyComponents'
const MyStyleTheme = StyleSheet.create({
middle: {
alignItems: "center",
justifyContents: "center"
},
NavBar: {
backgroundColor: NavBar.bgColor //from UiConfig
}
})
export default MyStyleTheme
And the another file:
'use strict';
import { Platform } from 'react-native'
var React = require('react-native');
var {StyleSheet,} = React;
const MyComponents = StyleSheet.create({
Navigator: {
...
...
}
})
export default MyComponents
So...it's possible to import a primary stylesheet instead of import another one just like CSS #import or not?
index.ios.js:
import React, { Component } from 'react'
import {
StyleSheet,
StatusBar,
Text,
View,
} from 'react-native'
import MyStyleTheme from '../primaryStyles'
...
...
...
render(){
return(
<View style={[MyStyleTheme.middle]}>
<View style={[MyStyleTheme.MyComponents]}>
</View>
);
}
Well...I found a way to solve it:
const obj = { flex: 1, justifyContent: "center", alignItems: "center" }
const MyComponents = StyleSheet.create({
Navigator: {
...obj,
height: 44
}
})