I have a custom component that is simply a Text component that receives various props for styling. It works perfectly on iOS but on Android the text of the component doesn't shows.
This is the code of the component:
import React, { Component } from 'react';
import { Text, StyleSheet } from 'react-native';
export default class TextLabel extends Component {
render() {
const colors = {
red: '#CF243E',
lightRed: '#E9BBC0',
white: '#FFFFFF',
default: '#434A54'
}
const weights = {
bold: 'Raleway-Bold',
default: 'Raleway-Regular'
}
const styles = StyleSheet.create({
textStyles: {
fontFamily: this.props.weight ? weights[this.props.weight] : weights.default,
fontSize: this.props.size ? this.props.size : 16,
textTransform: this.props.case ? this.props.case : 'none',
color: this.props.color ? colors[this.props.color] : colors.default
},
additionalStyles: this.props.additionalStyles ? this.props.additionalStyles : {}
})
return (
<Text style={[styles.textStyles, styles.additionalStyles]}>
{this.props.children}
</Text>
);
}
}
I then use it like this in other components:
import React, { Component } from 'react';
import { View } from 'react-native';
import TextLabel from '../UI/TextLabel';
export default class Resolution extends Component {
render() {
return (
<View style={styles.wrapper}>
<TextLabel
size={21}
weight={'bold'}
additionalStyles={{ marginTop: 30, marginBottom: 10, textAlign: 'center'}}
>
Some random text
</TextLabel>
</View>
);
}
}
But on Android it doesn't renders the text while on iOS it works perfectly. What could be going on?
Thanks in advance.
As it turns out this is due to the use of the textTransform property which currently has a bug on Android that causes the text to disappear if you set this property in a component's style.
The solution for now is to either not use it or use string.toUpperCase() as workaround.
More info on this bug here: https://github.com/facebook/react-native/issues/21966
Related
I am new to react-native. I was trying to write simple programs found from tutorials in order to familiar with react-native environment. I have researched on the same bug on stackoverflow itself and couldn't find any helpful solution, that's the reason I am writing again.
I was referring to the following tutorial
https://levelup.gitconnected.com/getting-started-with-react-native-in-2019-build-your-first-app-a41ebc0617e2
Following is the code that I have used.
Created a new class named EmojiDict.js
import React, { Component } from 'react'
import { View, Text, StyleSheet } from 'react-native'
class EmojiDict extends Component {
state = {
'😃': '😃 Smiley',
'🚀': '🚀 Rocket',
'⚛️': '⚛️ Atom Symbol'
};
render() {
return (
<View style={styles.container} >
<Text>this.state['😃'] </Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5
}
});
Then modified the App.js class as follows:
import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import EmojiDict from './src/components/EmojiDict';
export default class App extends Component {
render() {
return <EmojiDict />;
}
}
I have tried various examples and nothing worked when the App.js class gets modified. I am not able to go forward due to this error.
It's looks like you forgot to export the EmojiDict component
instead of class EmojiDict extends Component {
try
export default class EmojiDict extends Component {
may resolve this issue
I have try to use textAlign: 'justify' property in react native.TextAlign justify doesn't work on Android.
React native version: "react-native": "0.59.5"
import React from 'react';
import { Image, View } from 'react-native';
import { Text, Button } from 'native-base';
import { connect } from 'react-redux';
import EStyleSheet from 'react-native-extended-stylesheet';
import { colors } from '../styles';
class Login extends React.Component {
render() {
return (
<View style={styles.container}>
<View style={styles.contentCenter}>
<Text style={[styles.titleContent,styles.fontBold]}>Simple Secure</Text>
<Text style={[styles.titleContent,styles.fontBold]}>Reliable Messaging</Text>
</View>
</View>
);
}
}
const styles = EStyleSheet.create({
titleContent: {
color:'#62778c',
fontSize: '1.4rem',
textAlign: 'justify',
}
});
const mapStateToProps = (state) => {
return {};
};
export default connect(mapStateToProps)(Login);
checkout the offical document:
textAlign: enum('auto', 'left', 'right', 'center', 'justify')
Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.
As mentioned above android does not support text justification but you can go around this by adding the html text inside WebView like this:
<WebView
source={{ html: "<p style='text-align:justify;'>Your justified text</p>" }}
/>
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?
Hello everyone i am new to react native i just stared learning.
i am trying with react native , i have studied about it and now i am trying to learn it , This is my first day in this,
I just created react native project and created one js file and write view in that created js and imported in index.android.jd but it display default view
here is the code
index.android.js
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import Compo from './homecomponent'
export default class AwesomeProject extends Component {
render() {
return (
<Compo/>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
and homecomponent is as follow
import {
AppRegistry,
StyleSheet,
Text,
View,
ToolbarAndroid,
TouchableHighlight
} from 'react-native';
export default class homecomponent extends Component
{
render()
{
return(
<view style={styles.container}>
<ToolbarAndroid style={styles.toolbar0}
title="counter demo"/>
<Text>WOWWWW</Text>
<TouchableHighlight
style={ styles.button} >
<Text style={styles.buttontext}>increment</Text>
</TouchableHighlight>
</view>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent:'center',
alignItems: 'center',
},
button:{
backgroundColor:'deepskyblue',
borderwidth:1,
alignItems:'center',
justifyContent:'center',
alignSelf:'stretch',
height:50,
margin:10,
borderRadius:3
},
buttontext:{
fontSize:20,
color:'#FFF'
},
toolbar: {
alignSelf: 'stretch',
height: 50,
backgroundColor: 'silver',
},
text: {
fontSize:20,
},
cancelButton: {
backgroundColor: '#696969',
},
});
Please give me the suggesction why the view is not update in android.I stuck on that problem since morning.
import homecomponent from './HomeCompo'
Do these two following things:
First, in index.android.js file, update your import Compo from './homecomponent' to import homecomponent from './homecomponent'
Second, in the same file, update your return component inside view. Just Add View and inside that rename the component name as homecomponent.
I have a TextInput component in react native
<TextInput
style={styles.searchBar}
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
placeholder='Search State'
/>
This is working perfectly fine in android, but Textbox is not showing in iOS app. And, there is no what to find what the issue is.
Can anybody help with this issue ?
Here is a code sample that demonstrates the need to provide a height for the TextInput component on iOS. It's not explicitly stated in the docs but reviewing it closely you'll notice the iOS section of the code samples provides a height while the android samples do not. Here is a complete code sample that displays a TextInput in the center of the view:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
View
} from 'react-native';
class MyApp extends Component {
constructor (props) {
super(props);
this.state = {
searchText: ''
};
}
setSearchText (e) {
this.setState({
searchText: e.target.value
});
}
render () {
return (
<View style={styles.container}>
<TextInput
style={styles.searchBar}
value={this.state.searchText}
onChange={this.setSearchText.bind(this)}
placeholder='Search State'
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
searchBar: {
borderWidth: 1,
height: 40
}
});
AppRegistry.registerComponent('MyApp', () => MyApp);
If this doesn't help as a sanity check in debugging your code, please post the style definition (styles.searchBar) you have configured for your TextInput so we can give that a better test.
you should give the textinput height and width to display the textinput as:
<Textinput style={{height:200, width:300}}/>