CODEWITHSUNDEEP
react-native
Lucas Farleigh
Lucas Farleigh

Reputation: 1178

Can't find variable: Button - React Native

I am trying to create a simple app with a button in react native, but so far every time I run my code, it gives me an error saying "Can't find variable: Button". I would like to end up with my title at the top (Already done) and a button in the center of the screen, which gives an alert when touched.

I have run through several online tutorials and cannot find a solution.

Here is my code:

        /**
     * Sample React Native App
     * https://github.com/facebook/react-native
     * @flow
     */

    import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';

    class Project extends Component {
      render() {
        return (
          <View style={styles.container}>
           <Text style={styles.Title}>
             Lucas's App
            </Text>
           <View style={styles.buttonContainer}>
             <Button
               onPress={() => { Alert.alert('You tapped the button!')}}
               title="Press Me"
             />
            </View>
          </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        },
      Title: {
        color: '#000000',
        marginTop: 13,
        paddingLeft:100,
        paddingRight:100,
        fontFamily: 'Avenir',
        fontSize: 30,
      },
        buttonContainer: {
        margin: 20
      },

    });

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

Thanks in advance.

Upvotes: 9

Views: 12506

Answers (1)

Lucas Farleigh
Lucas Farleigh

Reputation: 1178

You need to make sure to import the button. You can do this by adding 'button' to your import list:

     import {
      AppRegistry,
      StyleSheet,
      Text,
      View,
      Alert
      Button,
     
    } from 'react-native';

Upvotes: 21

Related Questions