react-native#Button JavaScript Examples

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 >

    )
}

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

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

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

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

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

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

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

render() {
    return (
      <View style={styles.root}>
        <Button title="Login" onPress={app.login}/>
      </View>
    )
  }