Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Issue overlaying results and using TouchableOpacity

See original GitHub issue

Hi, I am having issues overlaying the results on an existing screen containing a List. the first image in the link is the starting screen of the app. And the second screen is what happens when results of the autocomplete are returned.

Code for the search header below

import React, {Component} from 'react';
import Autocomplete from 'react-native-autocomplete-input';
import {
  AppRegistry,
  View,
  StyleSheet,
  Platform,
  Text,
  TouchableOpacity,
} from 'react-native';
import colors from './config/colors';
import normalize from './config/normalizeText';

export class SearchHeader extends Component {
  constructor() {
    super();
    this.state = {
      list: [],
    }
  }

  static navigationOptions = {
    title:""
  };

  search = (term) => {
    if (term.length > 2) {
      fetch("www.myUrlToApi?term=" + encodeURI(term))
        .then((response) => response.json())
        .then((responseJson) => {
          this.setState({list: responseJson});
          console.log(responseJson);
        })
        .catch((error) => {
          console.error(error)
        });
    }
    else{
      this.setState({list: []});
    }
  };
  onPress = (item) => {
    this.props.navigation.navigate('ProductScreen',{spec:item});
  };
  render() {
    return (
      <View style={[
        styles.container, styles.containerLight
      ]}>
        <Autocomplete placeholder="Search Specs & Approvals..."
                      autoCorrect={false}
                      onChangeText={this.search}
                      data={this.state.list}
                      containerStyle={{backgroundColor: "#d71201"}}
                      inputStyle={{backgroundColor: "#fff"}}
                      renderItem={({ id, specification }) => (
                        <TouchableOpacity style={styles.autocompleteContainer} onPress={this.onPress.bind(this, specification)}>
                          <Text style={styles.itemText}>
                            {specification}
                          </Text>
                          <View
                            style={{
                              height: 1,
                              width: "98%",
                              backgroundColor: "#CED0CE",
                              marginLeft: "1%",
                              marginRight: "1%"
                            }}
                          />
                        </TouchableOpacity>
                      )}
                      style={[
                        styles.input,
                        styles.inputLight,
                        {borderRadius: Platform.OS === 'ios' ? 15 : 20},
                        {paddingRight: 50}
                      ]}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderBottomColor: '#000',
    borderTopColor: '#000',
    backgroundColor: "#d71201",
    maxHeight:70
  },
  containerLight: {
    borderTopColor: '#e1e1e1',
    borderBottomColor: '#e1e1e1',
  },
  input: {
    paddingLeft: 26,
    paddingRight: 19,
    margin: 8,
    borderRadius: 3,
    overflow: 'hidden',
    backgroundColor: colors.grey5,
    fontSize: normalize(14),
    color: colors.grey3,
    height: 40,
    ...Platform.select({
      ios: {
        height: 30,
      },
      android: {
        borderWidth: 0,
      },
    }),
  },
  inputLight: {
    backgroundColor: "#fff"
  },
  autocompleteContainer: {
    backgroundColor:"#fff",
    marginLeft: 10,
    marginRight: 10
  },
  itemText: {
    fontSize: 15,
    margin: 5,
    marginLeft: 20,
    paddingTop:5,
    paddingBottom:5
  },
  descriptionContainer: {
    backgroundColor: '#F5FCFF',
    marginTop: 8
  },
  infoText: {
    textAlign: 'center'
  },
  titleText: {
    fontSize: 18,
    fontWeight: '500',
    marginBottom: 10,
    marginTop: 10,
    textAlign: 'center'
  },
  directorText: {
    color: 'grey',
    fontSize: 12,
    marginBottom: 10,
    textAlign: 'center'
  },
  openingText: {
    textAlign: 'center'
  }
});

AppRegistry.registerComponent('SearchHeader', () => SearchHeader);

Also when I tap on the results it gives an error undefined is not an object (evaluating '_this.props.navigation.navigate