react-native#Button JavaScript Examples

The following examples show how to use react-native#Button. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: modals.js    From Spring2020_MyFood_FrontEnd with GNU General Public License v3.0 6 votes vote down vote up
ScrollModal = props  => {

  return (
        <Modal visible = {props.visible}>
            <View style = {styles.myModal}>
                <Button title = "go back" onPress={props.onClose}/>
            </View>
        </Modal>
  );
}
Example #2
Source File: App.js    From Solution-Starter-Kit-Cooperation-2020 with Apache License 2.0 6 votes vote down vote up
ResourcesStackOptions = ({ navigation }) => {
  return ({
    headerRight: () => (
      <Button
        onPress={() => navigation.navigate('Chat')}
        title='Chat '
      />
    )
  });
}
Example #3
Source File: detail.js    From perform-2020-hotday with Apache License 2.0 6 votes vote down vote up
Detail.navigationOptions = screenProps => ({
  title: screenProps.navigation.getParam('title'),
  headerStyle: {
    backgroundColor: 'orange'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:24
  },
  headerRight: (
    <Button title="Edit" color="white"
      onPress={() => screenProps.navigation.navigate("Edit", {movie: screenProps.navigation.getParam("movie")})}
    />
  )
})
Example #4
Source File: ErrorModal.js    From haven with MIT License 6 votes vote down vote up
export default function ErrorModal(props) {
  const { title, error, onPress, buttonText } = props;
  return (
    <Modal transparent >
      <View style={styles.wrapper}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.body}>Error: {error}</Text>
        <Button title={buttonText} onPress={onPress} />
      </View>
    </Modal>);
}
Example #5
Source File: ResultScreen.js    From adyen-react-native-online-payments with MIT License 6 votes vote down vote up
export default function ResultScreen({ route, navigation }) {
  const { params } = route.params;

  const goHome = () => {
    navigation.navigate("Root");
  };

  return (
    <SafeAreaView style={styles.container}>
      <Text>Payment result: {params.resultCode.toUpperCase()}</Text>

      <View style={styles.buttonContainer}>
        <Button
          onPress={goHome}
          title="Home"
          color="#0ABF53"
          accessibilityLabel="Back to Home"
        />
      </View>
    </SafeAreaView>
  );
}
Example #6
Source File: Couple.js    From reactnative-best-practice with MIT License 6 votes vote down vote up
// const GET_GREETING = gql`
//   query getGreeting {
//     hello
//   }
// `;

export default function CoupleScreen(props) {
  const {navigation} = props;
  const {navigate} = navigation;

  const authContext = useContext(CTX);
  const {_logout} = authContext;

  // const {loading, error, data} = useQuery(GET_GREETING);

  function _onLogout() {
    _logout();
    navigate('Login');
  }

  return (
    <View style={styles.container}>
      <Button onPress={_onLogout} title="Log out" color="#841584" />
      {/* {loading ? <Text>Loading ...</Text> : <Text>Hello {data.hello}!</Text>} */}
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
      <Text> Couple </Text>
    </View>
  );
}
Example #7
Source File: App.js    From celo-dappkit with MIT License 6 votes vote down vote up
render(){
    return (
      <View style={styles.container}>
        <Image resizeMode='contain' source={require("./assets/white-wallet-rings.png")}></Image>
        <Text>Open up client/App.js to start working on your app!</Text>
        
        <Text style={styles.title}>Login first</Text>
        <Button title="login()" 
          onPress={()=> this.login()} />
                <Text style={styles.title}>Account Info:</Text>
        <Text>Current Account Address:</Text>
        <Text>{this.state.address}</Text>
        <Text>Phone number: {this.state.phoneNumber}</Text>
        <Text>cUSD Balance: {this.state.cUSDBalance}</Text>

        <Text style={styles.title}>Read HelloWorld</Text>
        <Button title="Read Contract Name" 
          onPress={()=> this.read()} />
        <Text>Contract Name: {this.state.contractName}</Text>
        
        <Text style={styles.title}>Write to HelloWorld</Text>
        <Text>New contract name:</Text>
        <TextInput
          style={{  borderColor: 'black', borderWidth: 1, backgroundColor: 'white' }}
          placeholder="input new name here"
          onChangeText={text => this.onChangeText(text)}
          value={this.state.textInput}
          />
        <Button style={{padding: 30}} title="update contract name" 
          onPress={()=> this.write()} />
      </View>
    );
  }
Example #8
Source File: Actions.js    From BE-NT2-2020-2-TP2 with MIT License 6 votes vote down vote up
export default function Actions(props) {
  
  return (
    <>
      <Button title={!props.active ? 'Iniciar' : 'Pausar'} onPress={props.activarTimer}></Button>
      <Button title='Reiniciar' onPress={props.reiniciarTimer}></Button>
    </>
  );
}
Example #9
Source File: App.js    From BE-NT2-2021-TP2 with MIT License 6 votes vote down vote up
export default function App() {
  return (
    <View style={styles.container}>
      <Text>Click para hacer vibrar el dispositivo!</Text>
      <Button 
        title="Vibracion"
        onPress={vibrate}
      />
      <StatusBar style="auto" />
    </View>
  );
}
Example #10
Source File: Login.js    From ultimate-hackathon-starting-guide with MIT License 6 votes vote down vote up
export default function Login({navigation}) {
    const { signIn } = useContext(AuthContext);
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    return (
        <>
            <StatusBar barStyle='dark-content' />
            <SafeAreaView style={{flex : 1, backgroundColor: "#00FF00"}}>
                <Text style={{textAlign: "center"}}>Login</Text>
                <Text style={{textAlign: "left"}}>Email</Text>
                <TextInput style={{borderWidth: 2}} onChangeText={text => setEmail(text)} value={email} />
                <Text style={{textAlign: "left"}}>Password</Text>
                <TextInput style={{borderWidth: 2}} onChangeText={text => setPassword(text)} secureTextEntry={true} value={password} />
                <Button title="Submit" onPress={() => signIn({email, password})} />
                <Button title="Register" onPress={() => navigation.navigate('Register')} />
            </SafeAreaView>
        </>
    );
}
Example #11
Source File: ImportScreen.js    From hugin-mobile with GNU Affero General Public License v3.0 6 votes vote down vote up
render() {
      const { t } = this.props;
        return(
            <View style={{ flex: 1, backgroundColor: this.props.screenProps.theme.backgroundColour }}>
                <View style={{
                    justifyContent: 'flex-start',
                    alignItems: 'flex-start',
                    marginTop: 60,
                    marginLeft: 30,
                    marginRight: 10,
                }}>
                    <Text style={{ fontFamily: 'Montserrat-SemiBold', color: this.props.screenProps.theme.primaryColour, fontSize: 25, marginBottom: 60 }}>
                        {t('howToImport')}
                    </Text>
                </View>

                <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
                    <View style={[Styles.buttonContainer, {alignItems: 'stretch', width: '100%', marginTop: 5, marginBottom: 5}]}>
                        <Button
                            title={t('mnemonic')}
                            onPress={() => this.props.navigation.navigate('ImportSeed', { scanHeight: this.scanHeight })}
                            color={this.props.screenProps.theme.buttonColour}
                        />
                    </View>

                    <View style={[Styles.buttonContainer, {alignItems: 'stretch', width: '100%', marginTop: 5, marginBottom: 5}]}>
                        <Button
                            title={t('privateKeys')}
                            onPress={() => this.props.navigation.navigate('ImportKeys', { scanHeight: this.scanHeight })}
                            color={this.props.screenProps.theme.buttonColour}
                        />
                    </View>
                </View>
            </View>
        );
    }
Example #12
Source File: SampleScreen.js    From mixpanel-react-native with Apache License 2.0 6 votes vote down vote up
SampleScreen = () => {
  const mixpanel = useMixpanel();
  return (
    <SafeAreaView>
      <Button
        title="Select Premium Plan"
        onPress={() => {
          mixpanel.track("Plan Selected", {"Plan": "Premium"});
        }}
      />
    </SafeAreaView>
  );
}
Example #13
Source File: BLEReadCharacteristic.js    From BLEServiceDiscovery with GNU General Public License v3.0 6 votes vote down vote up
function BLEReadcharacteristic(ReduxStore) {

  const [text,setText] = useState({'text':'write something to device'});

    return(
        <SafeAreaView style={styles.container}>
          <Text>{ReduxStore.selectedCharacteristic.uuid}</Text>
            <FlatList
                data={[ReduxStore.selectedCharacteristic]}
                renderItem={({ item }) => 
                <>
                <Item characteristic={item} />
                <TextInput
                 onChangeText={(text) => setText({text})}
                  style={{ height: 40, color: 'black', borderColor: 'gray', borderWidth: 1 }}
                  value={text.text}
                />
                <Button
                  title="Write"
                  onPress={() => handleClick(ReduxStore,text.text)}
                ></Button>
                </>
                }
                keyExtractor={item => item.id.toString()}
                ListEmptyComponent={DataActivityIndicator}
            />
        </SafeAreaView>
    );
}
Example #14
Source File: Featured.js    From mcrn-event-booking-app-starter with MIT License 6 votes vote down vote up
Featured = ({ navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={{ color: '#fff', fontSize: 30 }}>Featured</Text>
      <Button
        onPress={() => {
          navigation.navigate('EventDetail');
        }}
        title="Go to Event Detail"
      />
    </View>
  );
}
Example #15
Source File: index.ios.jsx    From polaris with Apache License 2.0 6 votes vote down vote up
PickerSheet = ({
  onValueChange,
  currentOption,
  testID,
  cancelLabel = 'cancel',
  options
}) => {
  const { t } = useTranslation()
  const translatedCancelLabel = t(cancelLabel)

  const changeOption = useCallback(() => {
    const optionLabels = options.map(option => option.label)

    return ActionSheetIOS.showActionSheetWithOptions(
      {
        options: [translatedCancelLabel, ...optionLabels],
        cancelButtonIndex: 0
      },
      buttonIndex => {
        if (buttonIndex > 0) {
          onValueChange(options[buttonIndex - 1].value)
        }
      }
    )
  }, [translatedCancelLabel, options, onValueChange])

  return (
    <View>
      <Button
        onPress={changeOption}
        title={currentOption.label || currentOption.value}
        testID={testID}
      />
    </View>
  )
}
Example #16
Source File: App.js    From react-native-sdk with MIT License 6 votes vote down vote up
render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>{this.state.title}</Text>
        <Text style={styles.instructions}>{this.state.subtitle}</Text>
        <Button title="Launch" onPress={() => this.startSDK()} />
        {this.state.sdkFlowComplete ? (
          <Redirect to={`/finish/${this.state.status}/${this.state.message}`} />
        ) : null}
      </View>
    );
  }
Example #17
Source File: HomeScreen.js    From iitj-canteen with GNU General Public License v3.0 6 votes vote down vote up
render() {
		const { loading, signOut } = this.props;
		return (
			<View style={styles.view}>
				<Text style={styles.text}>HomeScreen</Text>
				<Button
					onPress={() => this.props.navigation.navigate('DetailScreen')}
					title="DetailScreen"
				/>
				<Button onPress={signOut} title="Sign Out" />
			</View>
		);
	}
Example #18
Source File: SkipLoginButton.js    From discovery-mobile-ui with MIT License 6 votes vote down vote up
SkipLoginButton = () => {
  const setAuthentication = useSetRecoilState(authenticationState);

  if (showSkipLogin) {
    return (
      <Button
        title="Skip Login"
        onPress={() => setAuthentication(MOCK_AUTH)}
      />
    );
  }
  return null;
}
Example #19
Source File: Camera.js    From Realtime-Image-detection with MIT License 6 votes vote down vote up
render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
      </View>
    );
  }
Example #20
Source File: HomeScreen.js    From pandoa with GNU General Public License v3.0 6 votes vote down vote up
function HomeScreen(props) {
  const { clearAllTrigger } = props;

  return (
    <View style={styles.container}>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen
          name="Home"
          component={WarningsScreen}
          options={{
            headerTitle: "Warnings",
            headerRight: () => (
              <Button
                onPress={() => alert("Add settings page here")}
                title="Settings"
              />
            )
          }}
        />
        <Stack.Screen name="WarningDetail" component={WarningDetailScreen} />
      </Stack.Navigator>
    </View>
  );
}
Example #21
Source File: JobDetail.js    From Get-Placed-App with MIT License 5 votes vote down vote up
function JobDetail(props) {

    const { id, title, snippet, author, Company_image, Job_Description, apply_link, job_type, post_date } = props.route.params.data;
    const { width } = useWindowDimensions();
    var date = new Date(`${post_date}`)

    const source = {
        html: `
      ${Job_Description}`
    };
    const tagsStyles = {
        body: {
            marginLeft: 20,
            marginRight: 20,
        },

    };

    return (
        <View>
            <ScrollView style={styles.Top}>
                <View style={styles.headerStyle}>
                    <Title style={{ fontSize: 31, marginLeft: 20, fontWeight: 'bold' }}>{title}<Text style={{ fontSize: 14, fontWeight: 'normal', color: '#808080' }}>   -   ( {date.getDate()}-{date.getMonth()}-{date.getFullYear()})</Text></Title>

                </View>


                <View>
                    <Image
                        source={{ uri: `${Company_image}` }}
                        style={{ width: 300, height: 230, marginLeft: 30, }}
                    />
                </View>
                <View>
                    <RenderHtml
                        tagsStyles={tagsStyles}
                        contentWidth={width}
                        source={source}
                    />
                </View>
                <View style={[{ width: "90%", marginTop: 5, marginBottom: 25, borderRadius: 10, alignItems: 'center' }]}>
                    <Button
                        title="Apply"
                        color="#002223"
                        style={[{ borderRadius: 100, }]}
                        onPress={() => Linking.openURL(apply_link)}
                    />
                </View>

            </ScrollView>
        </View >

    )
}
Example #22
Source File: LoginForm.js    From Spring2020_MyFood_FrontEnd with GNU General Public License v3.0 5 votes vote down vote up
LoginForm = props  => {
      
    onPressLoginButton = () => {
        props.navigation.navigate("Home");
    };

    const [isModalVisible, setIsModalVisible] = useState(false);

    toggleModal = () => {
      setIsModalVisible(!isModalVisible)
     // this.setState({ isModalVisible: !this.state.isModalVisible });
    };

  return (
    <View style={styles.container}>
     <TextInput 
     placeholder= "Username"
     placeholderTextColor="#000"
     returnKeyType="next"
     autoCapitalize='none'
     autoCorrect={false}
     style={styles.input}
     />
     <TextInput 
     placeholder= "Password "
     placeholderTextColor="#000"
     secureTextEntry
     returnKeyType="go"
     style={styles.input}
     />

    <View style= {styles.button}>
        <TouchableOpacity style={styles.buttonContainer} onPress={this.onPressLoginButton}>
        <Text style={styles.buttonText}>LOGIN</Text>
    </TouchableOpacity>
    <TouchableOpacity style={{paddingTop: 20}}>
        <Text style={styles.otherButtonText}>Forget Password</Text>
    </TouchableOpacity>
    <TouchableOpacity style={{paddingTop: 10}}>
        <Text style={styles.otherButtonText} onPress={toggleModal} >SIGNUP</Text>
    </TouchableOpacity>
    <Modal isVisible={isModalVisible}>
          <View style={{ flex: 1 }}>
          <Button style={styles.cancelBtn} title="X" onPress={toggleModal} />
      {/* <FontAwesome style={{fontSize: 32}} icon={BrandIcons.github}/> */}

            <Register />
          </View>
        </Modal>
    </View>
    
    </View >
  );
}
Example #23
Source File: index.js    From dig4639-mobile-dev with MIT License 5 votes vote down vote up
render() {
        if (this.state.question === 0) {
    

            return(
                <>
                    <View>
                        <Text style={this.state.styles.title}>Quiz!</Text>
                    </View>
                    <Button
                        onPress={this.addQuestion.bind(this)}
                        title="Ready to take this Survey Quiz?"
                        color="#6a0dad"
                        />

                </>
            );
        } else if (this.state.question > this.state.questions.length) {
         

            return(
                <>
                    <View>
                        <Text style={this.state.styles.title}>Here are your results.</Text>
                    </View>
                    <View>
                        <Text style={this.state.styles.title}>{(this.state.correct / this.state.questions.length) * 100}%</Text>
                    </View>
                    <View>
                        <Text>You have gotten {this.state.correct} out of {this.state.questions.length} correct.</Text>
                    </View>
                </>
            );
        } else {
           

            return(
                <>

<View>
                        <Text style={this.state.styles.question}>{this.state.questions[this.state.question - 1].question}</Text>
                    </View>


                  <View>
                        <Button
                            onPress={this.addQuestion.bind(this)}
                            title={this.state.questions[this.state.question - 1].wrongChoice}
                            accessibilityLabel="Choose"
                            style={this.state.styles.answer}
                            />
                    </View>
                   
                    <View>
                        <Button
                            onPress={this.correctChoice.bind(this)}
                            title={this.state.questions[this.state.question - 1].correctChoice}
                            accessibilityLabel="Choose"
                            style={this.state.styles.answer}
                            />
                    </View>
                  
                </>
            );
        }
        
    }
Example #24
Source File: detail.js    From perform-2020-hotday with Apache License 2.0 5 votes vote down vote up
//ToDo
//import { Dynatrace, Platform } from '@dynatrace/react-native-plugin';

export default function Detail(props) {

  const movie = props.navigation.getParam('movie', null);
  let token=null;
  const [ highlight, setHeighlight] = useState(0); 

  const getData = async () => {
    token = await AsyncStorage.getItem('MR_Token');
    if (token) {
      console.log("+++++++++++++ Token retrieved= " + token);
    } else {
      console.log("************* No token found ************");
    }
  };
  
  const rateClicked = () => {
    getData();
    if(highlight > 0 && highlight < 6){ 
      //ToDo
      //Dynatrace.reportIntValue("Stars",  highlight);
      fetch(`http://www.dynatraceworkshops.com:8079/api/movies/${movie.id}/rate_movie/`, {
      method: 'POST',
      headers: {
        'Authorization': `Token ad99a678759cb7c771457680a6cc68cbec062de9`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ stars: highlight})
    })
    .then( res => res.json())
    .then( res => {
      setHeighlight(0);
      Alert.alert("Rating", res.message);
    })
    .catch( error => Alert.alert("Error", error));
    }
  }

  return (
    <View style={styles.container}>
      <View style={styles.starContainer}>
        <FontAwesomeIcon style={movie.avg_rating > 0 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 1 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 2 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 3 ? styles.orange : styles.white} icon={faStar}/>
        <FontAwesomeIcon style={movie.avg_rating > 4 ? styles.orange : styles.white} icon={faStar}/>
        <Text style={styles.white}>({movie.no_of_ratings})</Text>
      </View>
      <Text style={styles.description}>{movie.description}</Text>

      <View style={{borderBottomColor: 'white', borderBottomWidth: 2}}/>
      <Text style={styles.description}>Rate it !!!</Text>

      <View style={styles.starContainer}>
        <FontAwesomeIcon style={highlight > 0 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(1)}/>
        <FontAwesomeIcon style={highlight > 1 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(2)}/>
        <FontAwesomeIcon style={highlight > 2 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(3)}/>
        <FontAwesomeIcon style={highlight > 3 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(4)}/>
        <FontAwesomeIcon style={highlight > 4 ? styles.purple : styles.grey} icon={faStar} size={48} onPress={()=> setHeighlight(5)}/>
      </View>
      <Button title="Rate" onPress={() => rateClicked()}/>
    </View>
  );
}
Example #25
Source File: Login.js    From InstagramClone with Apache License 2.0 5 votes vote down vote up
export default function Login(props) {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');

    const onSignUp = () => {
        firebase.auth().signInWithEmailAndPassword(email, password)
    }

    return (
        <View style={container.center}>
            <View style={container.formCenter}>
                <TextInput
                    style={form.textInput}
                    placeholder="email"
                    onChangeText={(email) => setEmail(email)}
                />
                <TextInput
                    style={form.textInput}
                    placeholder="password"
                    secureTextEntry={true}
                    onChangeText={(password) => setPassword(password)}
                />

                <Button
                    style={form.button}
                    onPress={() => onSignUp()}
                    title="Sign In"
                />
            </View>


            <View style={form.bottomButton} >
                <Text
                    title="Register"
                    onPress={() => props.navigation.navigate("Register")} >
                    Don't have an account? SignUp.
                </Text>
            </View>
        </View>
    )
}
Example #26
Source File: ComponentScreen.js    From adyen-react-native-online-payments with MIT License 5 votes vote down vote up
export function ComponentScreen({
  route,
  navigation,
  payment,
  paymentMethodInUse,
}) {
  const { type } = route.params;

  navigation.setOptions({ headerTitle: getHeaderTitle(type) });

  // React to paymentMethods updates
  React.useEffect(() => {
    paymentMethodInUse(type);
  }, [payment.paymentMethodsRes]);

  const handlePayment = () => {
    switch (type) {
      case "scheme":
        navigation.navigate("Card");
        break;
      case "ideal":
        navigation.navigate("IDeal");
        break;
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <Cart />
      <View style={styles.payButtonContainer}>
        <Button
          onPress={handlePayment}
          title="Checkout"
          color="#0ABF53"
          accessibilityLabel="Checkout and Pay"
        />
      </View>
    </SafeAreaView>
  );
}
Example #27
Source File: FocusableButton.js    From react-native-tv-demo with MIT License 5 votes vote down vote up
FocusableButton = forwardRef((props, ref) => {
  const [focused, setFocused] = useState(false);
  const [pressed, setPressed] = useState(false);

  let color = props.color;
  if (focused && props.colorFocused) {
    color = props.colorFocused;
  } else if (pressed && props.colorPressed) {
    color = props.colorPressed;
  }

  return (
    <Button
      {...props}
      ref={ref}
      onPress={(event) => {
        if (event.eventKeyAction !== undefined) {
          setPressed(parseInt(event.eventKeyAction) === 0);
          if (props.onPress) {
            props.onPress(event);
          }
        }
      }}
      onFocus={(event) => {
        console.log('focus: ' + props.nativeID);
        setFocused(true);
        if (props.onFocus) {
          props.onFocus(event);
        }
      }}
      onBlur={(event) => {
        setFocused(false);
        if (props.onBlur) {
          props.onBlur(event);
        }
      }}
      color={color}
    />
  );
})
Example #28
Source File: App.js    From react-native-recaptcha-that-works with MIT License 5 votes vote down vote up
App = () => {
  const size = 'invisible';
  const [key, setKey] = useState('<none>');

  const $recaptcha = useRef();

  const handleOpenPress = useCallback(() => {
    $recaptcha.current.open();
  }, []);

  const handleClosePress = useCallback(() => {
    $recaptcha.current.close();
  }, []);

  return (
    <SafeAreaView style={styles.safeArea}>
      <StatusBar barStyle="dark-content" />
      <View contentInsetAdjustmentBehavior="automatic" style={styles.container}>
        <Button onPress={handleOpenPress} title="Open" />
        <Text>Token: {key}</Text>
        <Text>Size: {size}</Text>
      </View>

      <Recaptcha
        ref={$recaptcha}
        lang="pt"
        headerComponent={
          <Button title="Close modal" onPress={handleClosePress} />
        }
        footerComponent={<Text>Footer here</Text>}
        siteKey="6LejsqwZAAAAAGsmSDWH5g09dOyNoGMcanBllKPF"
        baseUrl="http://127.0.0.1"
        size={size}
        theme="dark"
        onLoad={() => alert('onLoad event')}
        onClose={() => alert('onClose event')}
        onError={(err) => {
          alert('onError event');
          console.warn(err);
        }}
        onExpire={() => alert('onExpire event')}
        onVerify={(token) => {
          alert('onVerify event');
          setKey(token);
        }}
        enterprise
      />
    </SafeAreaView>
  );
}
Example #29
Source File: login.js    From react-native-iaphub with MIT License 5 votes vote down vote up
render() {
    return (
      <View style={styles.root}>
        <Button title="Login" onPress={app.login}/>
      </View>
    )
  }