react-native#Button JavaScript Examples

SampleScreen = () => {
  const mixpanel = useMixpanel();
  return (
    <SafeAreaView>
      <Button
        title="Select Premium Plan"
        onPress={() => {
          mixpanel.track("Plan Selected", {"Plan": "Premium"});
        }}
      />
    </SafeAreaView>
  );
}

MovieList.navigationOptions = screenProps => ({
  title: "List of movies",
  headerStyle: {
    backgroundColor: 'orange'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:24
  },
  headerRight: (
    <Button title="Add New" color="white"
      onPress={() => screenProps.navigation.navigate("Edit", {movie: {title: '', description: ''}})}
    />
  )
})

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>);
}

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>
  );
}

function BLEWritecharacteristic(ReduxStore) {

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

    return(
        <>
          <Text>{ReduxStore.selectedCharacteristic.uuid}</Text>
          <Item characteristic={ReduxStore.selectedCharacteristic} />
          <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)}
          />
        </>
    );
    }

SampleApp = () => {
  return (
    <SafeAreaView>
      <Button
        title="Select Premium Plan"
        onPress={() => mixpanel.track("Plan Selected", {"Plan": "Premium"})}
      />
    </SafeAreaView>
  );
}

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>
  );
}

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>
  )
}

// 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>
  );
}

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>
    );
  }

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>
        );
    }

export default function Actions(props) {
  
  return (
    <>
      <Button title={!props.active ? 'Iniciar' : 'Pausar'} onPress={props.activarTimer}></Button>
      <Button title='Reiniciar' onPress={props.reiniciarTimer}></Button>
    </>
  );
}

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>
  );
}

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>
        </>
    );
}

SkipLoginButton = () => {
  const setAuthentication = useSetRecoilState(authenticationState);

  if (showSkipLogin) {
    return (
      <Button
        title="Skip Login"
        onPress={() => setAuthentication(MOCK_AUTH)}
      />
    );
  }
  return null;
}

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>
  );
}

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>
    );
  }

ScrollModal = props  => {

  return (
        <Modal visible = {props.visible}>
            <View style = {styles.myModal}>
                <Button title = "go back" onPress={props.onClose}/>
            </View>
        </Modal>
  );
}

ResourcesStackOptions = ({ navigation }) => {
  return ({
    headerRight: () => (
      <Button
        onPress={() => navigation.navigate('Chat')}
        title='Chat '
      />
    )
  });
}

Edit.navigationOptions = screenProps => ({
  title: screenProps.navigation.getParam('title'),
  headerStyle: {
    backgroundColor: 'orange'
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
    fontSize:24
  },
  headerRight: (
    <Button title="Remove" color="white"
      onPress={() => removeClicked(screenProps)}
    />
  )
})

render() {
		const { signOut, loading } = this.props;
		return (
			<View>
				<Text>ProfileScreen</Text>
				<Button title="Sign Out" onPress={signOut} disabled={loading} />
			</View>
		);
	}

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>
    );
  }

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")})}
    />
  )
})

EmojiPickerView = ({ navigation }) => {
  // In here we are soring our currently picked emoji.
  const [chosenEmoji, setEmoji] = useState(null);

  // This method will be called when our user selects an emoji
  const handleEmojiSelected = emoji => {
    setEmoji(emoji);
  };

  // This method will be called when our user wants to continue with
  // currently selected emoji - this method will do nothing if user
  // didn't pick an emoji.
  const handleContinueButton = () => {
    if (chosenEmoji !== null) {
      navigation.replace("Chat", { emoji: chosenEmoji });
    }
  };

  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.topContainer}>
        <Text style={styles.hint}>
          Pick an emoji that will represent you in the chat
        </Text>
        <View
          style={{
            ...styles.emojiContainer,
            ...(chosenEmoji === null ? styles.empty : {})
          }}
        >
          <Text style={styles.emoji}>{chosenEmoji || ""}</Text>
        </View>
        <Button
          // If user haven't chosen an emoji, we disable the continue button
          disabled={chosenEmoji === null}
          style={styles.continueButton}
          title="Continue"
          onPress={handleContinueButton}
        />
      </View>
      <View style={{ height: "50%" }}>
        <EmojiSelector onEmojiSelected={handleEmojiSelected} />
      </View>
    </SafeAreaView>
  );
}

CalculatingCyclePeriodPage = () => {
  const [markedDates, setMarkedDates] = React.useState({});
  const [isStartDatePicked, setIsStartDatePicked] = React.useState(false);
  const [duration, setDuration] = React.useState('');
  const [startDate, setStartDate] = React.useState('');
  const navigation = useNavigation();

  const onDayPress = day => {
    if (isStartDatePicked) {
      let markedDatesObject = {
        day: {
          dateString: {
            startingDay: true,
            color: '#00B0BF',
            textColor: '#FFFFFF',
          },
        },
      };
      setMarkedDates(markedDatesObject);
      setIsStartDatePicked(true);
      setDuration('');
      setStartDate(day.dateString);
    } else {
      let markedDates = markedDates;
      let startDateTime = moment(startDate);
      let endDate = moment(day.dateString);
      let range = endDate.diff(startDateTime, 'days');
      let duration = moment.duration(startDateTime.diff(endDate)).asDays();

      if (range > 0) {
        for (let i = 1; i <= range; i++) {
          let tempDate = startDate.add(1, 'day');
          tempDate = moment(tempDate).format('YYYY-MM-DD');
          if (i < range) {
            markedDates[tempDate] = { color: '#00B0BF', textColor: '#FFFFFF' };
          } else {
            markedDates[tempDate] = { endingDay: true, color: '#00B0BF', textColor: '#FFFFFF' };
          }
        }

        setMarkedDates(markedDates);
        setIsStartDatePicked(false);
        setDuration(29);
        setStartDate(day.dateString);

        console.log(duration);
      } else {
        alert('Select an upcoming date!');
      }
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.welcome}>On the Calender shown below Please select :</Text>
      <Text style={styles.welcome}>1. First day of previous menstrual period.</Text>
      <Text style={styles.welcome}>2. First day of latest menstrual period.</Text>
      <Calendar
        maxDate={Date()}
        monthFormat={'MMMM yyyy'}
        markedDates={markedDates}
        markingType="period"
        hideExtraDays={true}
        hideDayNames={true}
        onDayPress={onDayPress}
      />
      <Text style={styles.welcome}>The ovulation cycle is of following Days </Text>
      <TextInput
        style={styles.welcome}
        placeholder="00 Days"
        onChangeText={text => setDuration(text)}
        value={duration}
      />
      <Button title="next" onPress={() => navigation.navigate('LastPeriod')} />
    </View>
  );
}

OBNavigation = ({
  isFirstScreen,
  isLastScreen,
  dotNav,
  handlePressNext,
  handlePressBack,
  handleOnboardingState,
}) => {
  const currentDotNav = dotNav ? dotNav[0] : null;
  const maxDotNav = dotNav ? dotNav[1] : null;

  const navDots = [];
  if (dotNav) {
    // eslint-disable-next-line no-plusplus
    for (let i = 0; i < maxDotNav; i++) {
      const dotNavStyle = i === (currentDotNav - 1) ? styles.dotNavFilled : styles.dotNavEmpty;
      navDots.push(<View key={i} style={dotNavStyle} />);
    }
  }

  return (
    <View style={styles.navContainer}>
      {__DEV__ && (
        <View style={styles.skipOnboarding}>
          <Button title="Skip Onboarding" onPress={() => handleOnboardingState(true)} />
        </View>
      )}
      <View style={styles.dotNavContainer}>
        {navDots}
      </View>
      <NavButtons
        isFirstScreen={isFirstScreen}
        isLastScreen={isLastScreen}
        handlePressBack={handlePressBack}
        handlePressNext={handlePressNext}
        handleOnboardingState={handleOnboardingState}
      />
    </View>
  );
}

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: 5 }}>
                        {t('betweenWhichBlocks')}
                    </Text>

                </View>

                <View style={{ justifyContent: 'center', alignItems: 'flex-start' }}>
                    {this.state.jumps.map(([startHeight, endHeight]) => {
                        return(
                            <View
                                key={startHeight}
                                style={[
                                    Styles.buttonContainer, {
                                        alignItems: 'stretch',
                                        width: '100%',
                                        marginTop: 5,
                                        marginBottom: 5,
                                    }
                                ]}
                            >
                                <Button
                                    title={startHeight + ' - ' + endHeight}
                                    onPress={() => this.props.navigation.navigate('ImportKeysOrSeed', { scanHeight: startHeight })}
                                    color={this.props.screenProps.theme.buttonColour}
                                />
                            </View>
                        );
                    })}
                </View>
            </View>
        );
    }

function AppPicker({
	icon,
	items,
	numberOfColumns = 1,
	onSelectItem,
	PickerItemComponent = PickerItem,
	placeholder,
	selectedItem,
	width = "100%",
}) {
	const [modalVisible, setModalVisible] = useState(false);

	return (
		<>
			<TouchableWithoutFeedback onPress={() => setModalVisible(true)}>
				<View style={[styles.container, { width }]}>
					{icon && (
						<MaterialCommunityIcons
							name={icon}
							size={20}
							color={defaultStyles.colors.medium}
							style={styles.icon}
						/>
					)}
					{selectedItem ? (
						<Text style={styles.text}>{selectedItem.label}</Text>
					) : (
						<Text style={styles.placeholder}>{placeholder}</Text>
					)}

					<MaterialCommunityIcons
						name="chevron-down"
						size={20}
						color={defaultStyles.colors.medium}
					/>
				</View>
			</TouchableWithoutFeedback>

			<Modal visible={modalVisible} animationType="slide">
				{/* Wrap Button and FlatList in <Screen> in case of iPhone issues - 'Close' getting hidden behind notch */}
				{/* <Screen> */}
				<Button title="Close" onPress={() => setModalVisible(false)} />
				<FlatList
					data={items}
					keyExtractor={(item) => item.value.toString()}
					numColumns={numberOfColumns}
					renderItem={({ item }) => (
						<PickerItemComponent
							item={item}
							label={item.label}
							onPress={() => {
								setModalVisible(false);
								onSelectItem(item);
							}}
						/>
					)}
				/>
			</Modal>
		</>
	);
}

Scan = ({ handleValidateTicket, loading }) => {
    const [hasPermission, setHasPermission] = useState(null);
    const [scanned, setScanned] = useState(false);

    useEffect(() => {
        (async () => {
            const { status } = await BarCodeScanner.requestPermissionsAsync();
            setHasPermission(status === 'granted');
        })();
    }, []);

    const handleBarCodeScanned = ({ type, data }) => {
        setScanned(true);
        handleValidateTicket(data);
    };

    if (hasPermission === null) {
        return <Text>Requesting for camera permission</Text>;
    }
    if (hasPermission === false) {
        return <Text>No access to camera</Text>;
    }

    return (
        <View
            style={{
                flex: 1,
                flexDirection: 'column',
                justifyContent: 'flex-end',
            }}>
            <StatusBar style="light"/>
            <BarCodeScanner
                onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
                style={{
                    position: 'absolute',
                    top: 20,
                    left: 0,
                    bottom: 0,
                    right: 0,
                }}
            />
            {loading && <Loading/>}

            {scanned && <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)}/>}
        </View>);
}