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.
Related
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
I need to pass props into Styles. So I created StyleSheet inside the class. But normal practice would be to create StyleSheet outside from the class.
I want to know are there any performance drawbacks by having StyleSheet.create inside the class ?
import React from 'react'
import { StyleSheet, View } from 'react-native'
import { connect } from 'react-redux'
import { Text } from 'native-base'
import p from '../../assets/colors/pallets'
const EmptyContainer = (props) => {
const texts = props.texts
const styles = StyleSheet.create({
emptyContainer: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
backgroundColor: p.background2[props.theme],
},
text: {
color: p.text1[props.theme],
},
})
return (
<View style={styles.emptyContainer}>
{texts.map((text) => (
<Text style={styles.text} key={Math.random()}>
{text}
</Text>
))}
</View>
)
}
const mapStateToProps = (state) => {
const { theme } = state
return {
theme: theme.theme,
}
}
export default connect(mapStateToProps)(EmptyContainer)
Edited:
There are several ways to pass props into StyleSheet.
Having StyleSheet inside class itself.
Pass props as function parameter to styles i.e. styles(props.theme). emptyContainer
What would be the best way by considering the performance of the app ?
I was trying to get familiarized with React Native by doing a very simple project using React Native. I wanted the code to be clean and following some architecture. I've been using Flux with React for some time now and thought I could do the same with React Native as well. If I am wrong here , kindly let me know why is it not possible?
Assuming that I was correct, let me present the actual problem that I am facing. I am following the CRNA tutorial and using Expo to build and test. To follow Flux architecture. This is what I had done.
Installed Flux with npm install flux
Created a dispatcher.js file with the following code.
import { Dispatcher } from 'flux';
export default new Dispatcher();
Created a 'sampleactiondispatcher.js' that does:
import Dispatcher from '../actiondispatchers/dispatcher';
import ActionType from '../actiondispatchers/actiontype';
class SampleActionDispatcher {
saveSomething(value) {
Dispatcher.dispatch({
actionType: ActionType.SAMPLE_ACTION,
payload: value
});
}
}
export default new SampleActionDispatcher();
Created a store which has a registered a callback to the dispatchersamplestore.js
import { EventEmitter } from 'events';
import Dispatcher from '../actiondispatchers/dispatcher';
import ActionType from '../actiondispatchers/actiontype';
// Constants
const SAMPLE_EVENT = 'SampleEvent';
class SampleStore extends EventEmitter {
constructor() {
super();
// Registering the callback
Dispatcher.register(this.dipatcherCallback.bind(this));
}
dipatcherCallback(action) {
switch (action.actionType) {
case ActionType.SAMPLE_ACTION:
this.emit(SAMPLE_EVENT);
break;
}
}
}
export default new SampleStore();
Here is the component that fires the action samplecomponent.js
import React from 'react';
import { StyleSheet,
Dimension,
TextInput,
View,
Text,
Button,
KeyboardAvoidingView } from 'react-native';
import SampleActionDispacther from '../../actiondispatchers/sampleactiondispatcher';
let screenWidth = Dimensions.get('window').width;
export default class SampleComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
textValue: ''
};
}
render() {
return (
<KeyboardAvoidingView id='sampleComponentHolder' style={styles.editorContainer} behavior='padding' enabled>
<View id='formFieldsHoldder' style={{paddingTop: 20}}>
<TextInput
id='textField1'
style={[styles.textStyle, styles.input]}
underlineColorAndroid = 'transparent'
placeholderTextColor='rgba(14,194,145,1)'
placeholder='Enter something'
keyboardType='numeric'
value={this.state.textValue}
onChangeText={(text) => this.setState({textValue: text})}
/>
<Button
id='saveButton'
color='rgba(46,107,138,1)'
title='Save'
onPress={this.onPressingSaveButton}
/>
</View>
</KeyboardAvoidingView>
);
}
/**
* On pressing the save button
*/
onPressingSaveButton =() => {
if (this.state.textValue !== '') {
SampleActionDispacther.saveSomething(Number(this.state.textValue));
} else {
alert('Oops! I dont think you have provided any values for saving.');
}
}
}
// Styles
const styles = StyleSheet.create({
editorContainer: {
flexDirection: 'column',
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
textStyle: {
color: 'rgba(14,194,145,1)',
fontFamily: 'monospace',
fontSize: 16,
textAlign: 'center'
},
input: {
height: 40,
width: (90 * screenWidth)/100,
borderWidth: 1
}
});
The real problem which makes me think that Flux is not working with react native is that, whenever I click the save button the dispatched action is not reaching the store. It would be really helpful if anyone can figure out why this is happening. Or is anything wrong with the code that I 've written?
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?
I'm working on a react-app using draft-js but when I run my application I have always this error
this is my js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {Editor, EditorState} from 'draft-js';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {editorState: EditorState.createEmpty()};
this.onChange = (editorState) => this.setState({editorState});
}
render() {
return (
<Editor editorState={this.state.editorState} onChange={this.onChange} />
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
for react native you need to use react-native-draftjs-render as draft js work for react and not supported for react native