Text not showing in single line React Native

Question

I want to show Text just on right side of my button but the Text didn't show in one line as it is showing like "Cre" in one line and other text in different line, The problem is with my Icon width and height which is less so it is making its child with same width and height but I can't increase my width and height. This is my button which has ImageBackGround as its child inside:

<TouchableHighlight style={styles.back} onPress={() => this.backBtn()}>
     <ImageBackground source={require('../assets/back.png')}
      style={{ width: 40, height: 45,position: 'absolute',  justifyContent: 'flex-start'}}
                resizeMode="contain">
     <View style={{position: 'absolute',right: -50,alignSelf:'center'}}> 
       <Text style = {{color:"#1589FF", fontSize:22}} >Create an Account </Text> 
            </View>
     </ImageBackground>
</TouchableHighlight>

The Problem is that this text "Create an Account" not showing in single line.

Any particular reason to use ImageBackground here? Why don't use Image instead? — aytek, Mar 14 '20 at 12:48

score 0 · Answer 1 · answered Mar 14 '20 at 12:50

See below example. I think this will help you to understand. however if you want to use ImageBackground instead Image let me know.

import * as React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';

class App extends React.Component {
  render() {
    return (
      <View style={styles.viewStyle}>
        <TouchableOpacity
          style={styles.inputContainer}
          onPress={() => console.log('click')}>
          <Image
            style={{ width: 30, height: 30 }}
            source={{
              uri:
                'https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-left-512.png',
            }}
          />
          <Text style={styles.textStyle}>Create an Account</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  viewStyle: {
    flex: 1,
    width: '80%',
    alignSelf: 'center',
    justifyContent: 'center',
  },
  inputContainer: {
    padding: 10,
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    borderWidth: 1,
    backgroundColor: 'gray',
  },
  textStyle: {
    fontSize: 16,
    color: '#000000',
  },
});

export default App;

Feel free for doubts.

Text not showing in single line React Native

1 Answers1