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
Related
I am new to React Native.
I am using Android Emulator from Android Studio, and I did not change anything at all from any .json file... Whenever the emulator is running it's always a blank screen... It does not display any single error by the way...
App.js:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
class App extends React.Component {
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
export default App;
Just press R two times... that simple, yes...
Current Behavior
When you click on the text, you get an error with the title.
Expected Behavior
I hoped that the screen would move smoothly without being cut off or showing a white screen.
How to reproduce
App.js
import React from "react";
import createAnimatedSwitchNavigator from "react-navigation-animated-switch";
import { Transition } from "react-native-reanimated";
import {
createDrawerNavigator,
createAppContainer,
createStackNavigator
} from "react-navigation";
import A from "./A";
import B from "./B";
const MySwitch = createAnimatedSwitchNavigator(
{
Home: A,
Other: B
},
{
initialRouteName: "Home",
headerMode: "none"
},
{
// The previous screen will slide to the bottom while the next screen will fade in
transition: (
<Transition.Together>
<Transition.Out
type="slide-bottom"
durationMs={400}
interpolation="easeIn"
/>
<Transition.In type="fade" durationMs={500} />
</Transition.Together>
)
}
);
const HomeScreenRouter = createAppContainer(MySwitch);
export default HomeScreenRouter;
A.js
import React from "react";
import { StyleSheet, Text, View, TouchableHighlight } from "react-native";
export default class A extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false
};
}
render() {
return (
<View style={styles.container}>
<Text onPress={() => this.props.navigation.navigate("Other")}>
Open up App.js to start working on your app!
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
B.js
import React from "react";
import { StyleSheet, Text, View } from "react-native";
export default class B extends React.Component {
constructor(props) {
super(props);
this.state = {
loading: false
};
}
render() {
return (
<View style={styles.container}>
<Text>B screen</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: "#fff",
alignItems: "center",
justifyContent: "center"
}
});
Your Environment
| react-navigation | "^3.11.0"
| react-native | "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
| node | v10.16.0
| react-native-reanimated | "^1.0.1"
| react-navigation-animated-switch | "^0.2.0"
| npm or yarn | 6.9.0
Please help me a lot
Thank you for your help.
it's not currently available in sdk 32. sdk 33 is coming soon.
this is documented in the readme
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.
I was trying a module located on npm on snack.expo.
But the following error is given to me.
Invariant Violation: View config not found for name RNMaterialLetterIcon
Where am I doing wrong?
Link: https://snack.expo.io/SyZa8lUEQ
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View
} from 'react-native';
import RNMaterialLetterIcon from 'react-native-material-letter-icon';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<RNMaterialLetterIcon
size={80}
border={true}
borderColor={"#dd2c00"}
borderSize={2}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
}
});
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?