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 |
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 |
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 |
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 |
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 |
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 |
// 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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
//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 |
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 |
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 |
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 |
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 |
render() {
return (
<View style={styles.root}>
<Button title="Login" onPress={app.login}/>
</View>
)
}