Button not displaying React-Native

Question

Hi I am going through a React-Native tutorial and I used the TouchableHighLight to create a button. The first button displays properly and the second button displays a straight line with the text "Location".

'use strict';

import React, { Component } from 'react'
import {
    StyleSheet,
    Text,
    TextInput,
    View,
    TouchableHighlight,
    ActivityIndicator,
    Image
} from 'react-native';


class SearchPage extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.description}>
                Search for houses to buy!
                </Text>
                <Text style={styles.description}>
                Search by place-name, postcode or search near your location.
                </Text>
            <View style={styles.flowRight}>
                <TextInput
                style={styles.searchInput}
                placeholder='Search via name or postcode'/>
                <TouchableHighlight style={styles.button}
                underlayColor='#99d9f4'>
                <Text style={styles.buttonText}>Go</Text>
                </TouchableHighlight>
            </View>
                <TouchableHighlight style={styles.button}
                underlayColor='#99d9f4'>
                <Text style={styles.buttonText}>Location</Text>
                </TouchableHighlight>
                <Image source={require('./Resources/house.png')} style={styles.image}/>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    description: {
        marginBottom: 20,
        fontSize: 18,
        textAlign: 'center',
        color: "#656565"
    },
    container: {
        padding: 30,
        marginTop: 65,
        alignItems: 'center'
    },
    flowRight: {
        flexDirection: 'row',
        alignItems: 'center',
        alignSelf: 'stretch'
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    button: {
        height: 36,
        flex: 1,
        flexDirection: 'row',
        backgroundColor: '#48BBEC',
        borderColor: '#48BBEC',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    },
    searchInput: {
        height: 36,
        padding: 4,
        marginRight: 5,
        flex: 4,
        fontSize: 18,
        borderWidth: 1,
        borderColor: '#48BBEC',
        borderRadius: 8,
        color: '#48BBEC'
    },
    image: {
    width: 217,
    height: 138
}
});

module.exports = SearchPage;

azwar_akbar · Accepted Answer · 2017-03-06 08:39:35Z

1

You missed to import Button. To use a component you must import that component before you use it.

import {
  //...
  //...
  View,
  Button
  //...
} from 'react-native';

Just put Button inside your import statement and I hope it works.

answered Mar 6, 2017 at 8:39

azwar_akbar

1,65120 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pch · Accepted Answer · 2016-11-20 01:23:58Z

0

It looks fine. Android Emulator, Android 6.0, API 23, Google APIs Intel Atom (x86)

answered Nov 20, 2016 at 1:23

pch

31 bronze badge

Comments

max23_ · Accepted Answer · 2016-11-20 01:23:58Z

0

Not sure is it copy/paste that causes the typo, there are two missing <View> tags in your code.

<View style={styles.container}>

  ...

  <View> // Missing tag for second button
    <TouchableHighlight style={styles.button} underlayColor='#99d9f4'>
      ...
    </TouchableHighlight>
  </View>

</View> // Missing tag for <View style={styles.container}>

answered Nov 20, 2016 at 1:23

max23_

6,6894 gold badges24 silver badges36 bronze badges

Comments

Nishant Mendiratta · Accepted Answer · 2017-05-13 04:25:46Z

0

I haven't spent much time to dig in and find the root cause but here is the quick fix. Remove flex:1 from styles.button block and update your render function with following.

class SearchPage extends Component {
render() {
        let flextStyles = {
            flex: 1
        };
        //rest of the code as it is
        ...
        //replace go button with following code
        <TouchableHighlight style={[styles.button, flextStyles]}
                    underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Go</Text>
        </TouchableHighlight>
        ...
       //rest of the code as it is
}}

Check screenshot, It will fix the problem.

answered May 13, 2017 at 4:25

Nishant Mendiratta

74913 silver badges25 bronze badges

Collectives™ on Stack Overflow

Button not displaying React-Native

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related