react-native-elements#Text JavaScript Examples
The following examples show how to use
react-native-elements#Text.
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: NoCards.js From universal-verifier-app with GNU General Public License v3.0 | 6 votes |
|
render() {
return (
<SafeAreaView style={styles.container} backgroundColor={this.props.colors.background}>
<View style={styles.card} borderColor={this.props.colors.divisor} >
<Divider style={[styles.cardTopDivisor]} borderColor={this.props.colors.divisor} />
<View style={styles.bottomContainer}>
<View style={styles.column1}>
<View style={styles.leftSquare} borderColor={this.props.colors.divisor} />
</View>
<View style={styles.column2}>
<Divider style={[styles.line, styles.lineRound, styles.lineShort]} borderColor={this.props.colors.divisor} />
<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
<Divider style={[styles.line, styles.lineRound]} borderColor={this.props.colors.divisor} />
</View>
</View>
</View>
<Text style={[styles.notes,{color:this.props.colors.divisor}]}>Passports you scan will appear here.</Text>
</SafeAreaView>
);
}
Example #2
| Source File: QRShow.js From universal-verifier-app with GNU General Public License v3.0 | 6 votes |
|
function QRShow({ navigation, route }) {
const {colors} = useTheme();
const [qrSize, setQRSize] = useState(0);
useEffect(() => {
navigation.setOptions({
headerStyle: { backgroundColor: colors.background },
headerTintColor: colors.text
});
});
onPageLayout = (event) => {
const {x, y, height, width} = event.nativeEvent.layout;
setQRSize(width);
};
return (
<View style={styles.container} backgroundColor={colors.background}>
<View style={styles.card} backgroundColor={colors.showQRBackground}>
<View style={styles.topView} onLayout={onPageLayout}>
<Text style={[styles.title,{color:colors.showQRText}]}>{route.params.title}</Text>
<Text style={[styles.detail,{color:colors.showQRText}]}>{route.params.detail}</Text>
</View>
<Divider style={[styles.divisor, {borderBottomColor:colors.divisor}]} />
<View style={styles.bottomView} onLayout={onPageLayout}>
<QRCode
value={route.params.qr}
size={qrSize}
color={colors.primary}
/>
</View>
</View>
<Text style={[styles.notes,{color:colors.showQRText}]}>{route.params.signedBy}</Text>
</View>
)
}
Example #3
| Source File: CardApproval.js From id.co.moonlay-eworkplace-mobile with MIT License | 6 votes |
|
render() {
return (
<View style={styles.viewContainer} >
<TouchableOpacity style={{height:'100%', width:'100%', flexDirection : 'row',}} onPress={this.onDetails}>
<View style={[styles.view1,{display: this.props.person.State === 'Work at client office' ? 'flex':'none'}]}>
<Buildings width={64} heigth={64}/>
</View>
<View style={[styles.view1,{display: this.props.person.State === 'Taking day off' ? 'flex':'none'}]}>
<Coffee width={64} heigth={64}/>
</View>
<View style={[styles.view1,{display: this.props.person.State === 'Work from home' ? 'flex':'none'}]}>
<WFH width={64} heigth={64}/>
</View>
<View style={[styles.view1,{display: this.props.person.State === 'Sick Leave' ? 'flex':'none'}]}>
<Sick width={64} heigth={64}/>
</View>
<View style={styles.viewText}>
<Text style={styles.text}>
{this.props.person.Name}
</Text>
<Text style={styles.text1}>
{this.props.person.State}
</Text>
</View>
<View style={styles.view3}>
<Text style={styles.text2}>{this.state.date}</Text>
<Text style={styles.textViewDetails}>View Details</Text>
</View>
</TouchableOpacity>
<CustomAlert details={this.state.detail} visible={this.state.visible} decline={this.buttonDecline} approve={this.buttonApprove} onClose={this.onBack}/>
</View>
)
}
Example #4
| Source File: bottomsheet.playground.jsx From playground with MIT License | 6 votes |
|
BottomSheetPlayground = () => {
const params = useView({
componentName: "BottomSheet",
props: {
children: {
type: PropTypes.ReactNode,
value: `<Text>Some Content</Text>`,
},
isVisible: {
type: PropTypes.Boolean,
value: false,
},
modalProps: {
type: PropTypes.Object,
value: `{ presentationStyle: "fullScreen" , visible:true}`,
description: "Modal Props -> https://reactnative.dev/docs/modal",
},
containerStyle: {
value: `{}`,
type: PropTypes.Object,
},
},
scope: {
BottomSheet,
Text,
},
imports: {
"react-native-elements": {
named: ["BottomSheet", "Text"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #5
| Source File: QRResult.js From universal-verifier-app with GNU General Public License v3.0 | 5 votes |
|
function QRResult({ navigation, route }) {
const {colors} = useTheme();
useEffect(() => {
navigation.setOptions({
headerStyle: { backgroundColor: colors.background },
headerTintColor: colors.text
});
});
const removeItem = async (signature) => {
await removeCard(signature);
navigation.navigate({name: 'Home'});
};
const onPress = () => {
navigation.navigate({name: 'Home'});
};
const qr = route.params.result.payload;
return (
<View style={styles.container} backgroundColor={colors.background}>
<View style={styles.verifiedPill} backgroundColor={colors.primary}>
<Text style={styles.verifiedText}><FontAwesome5 style={styles.verified} name={'check-circle'} solid/> Signature Verified</Text>
</View>
<View style={styles.card}>
{ qr.type === "BADGE" && <VaccineCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "COUPON" && <CouponCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "STATUS" && <StatusCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "PASSKEY" && <PassKeyCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "COWIN" && <CowinCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "FHIRBundle" && <SHCCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "DCC" && <DCCCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "UY" && <DCCUYCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "icao.vacc" && <VDSVAXCard detail={qr} colors={colors} removeItem={removeItem} /> }
{ qr.type === "icao.test" && <VDSTESTCard detail={qr} colors={colors} removeItem={removeItem} /> }
</View>
<TouchableOpacity
style={[styles.button, {backgroundColor: colors.primary}]}
onPress={onPress}
hitSlop={{top: 20, bottom: 20, left: 20, right: 20}}
>
<Text style={[styles.buttonText, { color: '#fff'}]}>Close</Text>
</TouchableOpacity>
</View>
)
}
Example #6
| Source File: listitem.playground.jsx From playground with MIT License | 5 votes |
|
ListItemPlayground = () => {
const params = useView({
componentName: "ListItem",
props: {
children: {
type: PropTypes.ReactNode,
value: `<Avatar source={{uri: "https://avatars0.githubusercontent.com/u/32242596?s=460&u=1ea285743fc4b083f95d6ee0be2e7bb8dcfc676e&v=4"}} />
<ListItem.Content>
<ListItem.Title><Text>Pranshu Chittora</Text></ListItem.Title>
<ListItem.Subtitle><Text>React Native Elements</Text></ListItem.Subtitle>
</ListItem.Content>`,
},
bottomDivider: {
type: PropTypes.Boolean,
value: false,
},
Component: {
type: PropTypes.Object,
value: `TouchableHighlight`,
description:
"View or TouchableHighlight (default) if onPress method is added as prop",
},
containerStyle: {
type: PropTypes.Object,
value: `{}`,
},
disabled: {
type: PropTypes.Boolean,
value: false,
},
disabledStyle: {
type: PropTypes.Object,
value: `{opacity:0.5}`,
},
onLongPress: {
type: PropTypes.Function,
value: `() => console.log("onLongPress()")`,
},
onPress: {
type: PropTypes.Function,
value: `() => console.log("onLongPress()")`,
},
pad: {
type: PropTypes.Number,
value: 20,
},
topDivider: {
type: PropTypes.Boolean,
value: false,
},
ViewComponent: {
type: PropTypes.Object,
value: ``,
description: "ontainer for linear gradient (for non-expo user)",
},
},
scope: {
ListItem,
Avatar,
Text,
TouchableHighlight,
},
imports: {
"react-native-elements": {
named: ["ListItem", "Avatar"],
},
"react-native": {
named: ["TouchableHighlight"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #7
| Source File: text.playground.jsx From playground with MIT License | 5 votes |
|
TextPlayground = () => {
const params = useView({
componentName: "Text",
props: {
h1: {
value: true,
type: PropTypes.Boolean,
description: "Heading 1",
},
h1Style: {
value: `{}`,
type: PropTypes.Object,
description: "Styling for h1",
},
h2: {
value: false,
type: PropTypes.Boolean,
description: "Heading 2",
},
h2Style: {
value: `{}`,
type: PropTypes.Object,
description: "Styling for h2",
},
h3: {
value: false,
type: PropTypes.Boolean,
description: "Heading 3",
},
h3Style: {
value: `{}`,
type: PropTypes.Object,
description: "Styling for h3",
},
h4: {
value: false,
type: PropTypes.Boolean,
description: "Heading 4",
},
h4Style: {
value: `{}`,
type: PropTypes.Object,
description: "Styling for h4",
},
style: {
value: `{}`,
type: PropTypes.Object,
description: "Styling of the text",
},
children: {
value: "This is a Text.",
type: PropTypes.String,
description: "Text Content",
},
},
scope: {
Text,
},
imports: {
"react-native-elements": {
named: ["Text"],
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
Example #8
| Source File: WorkInRemote.js From id.co.moonlay-eworkplace-mobile with MIT License | 4 votes |
|
render() {
return (
<View>
<View style={{height:'22%'}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work From Home
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkHome}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Work at Client's Office
</Text>
<Text style={{marginBottom: 10}}>
Select to complete your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToWorkClient}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Day Off
</Text>
<Text style={{marginBottom: 10}}>
Select to take day off and fill the form
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToDayOff}
/>
</View>
</View>
</Card>
</View>
<View style={{height:'22%', paddingTop:10}}>
<Card containerStyle={{height:'100%'}}>
<View style={{flexDirection : 'row'}}>
<View style={{flex:4}}>
<Text style={{marginBottom: 10, fontWeight: 'bold', fontSize:20}}>
Sick
</Text>
<Text style={{marginBottom: 10}}>
Select if you're sick to be able submit your attendance
</Text>
</View>
<View style={{flex:1}}>
<Button
icon={<Icon name='arrow-forward' color='#7C7C7C' type='font-awesome5' size={40} />}
type='clear'
buttonStyle={{borderRadius: 0, marginLeft: 0, marginRight: 0, marginBottom: 0,}}
onPress={this.moveToSick}
/>
</View>
</View>
</Card>
</View>
</View>
)
}
Example #9
| Source File: tooltip.playground.jsx From playground with MIT License | 4 votes |
|
ToolTipPlayground = () => {
const params = useView({
componentName: "Tooltip",
props: {
popover: {
value: `<Text>PopOver Content</Text>`,
type: PropTypes.ReactNode,
},
children: {
value: `<Text>Hello, There</Text>`,
},
backgroundColor: {
value: ``,
type: PropTypes.String,
},
closeOnlyOnBackdropPress: {
value: false,
type: PropTypes.Boolean,
},
containerStyle: {
value: `{}`,
type: PropTypes.Object,
},
height: {
value: 40,
type: PropTypes.Number,
},
width: {
value: 150,
type: PropTypes.Number,
},
highlightColor: {
value: "transparent",
type: PropTypes.String,
},
ModalComponent: {
value: `Modal`,
type: PropTypes.Object,
},
onClose: {
value: `() => console.log("onClose()")`,
type: PropTypes.Function,
},
onOpen: {
value: `() => console.log("onOpen()")`,
type: PropTypes.Function,
},
overlayColor: {
value: `rgba(250, 250, 250, 0.70)`,
type: PropTypes.String,
},
pointerColor: {
value: ``,
type: PropTypes.String,
},
skipAndroidStatusBar: {
value: false,
type: PropTypes.Boolean,
},
toggleAction: {
value: ``,
type: PropTypes.String,
},
toggleOnPress: {
defaultValue: true,
value: true,
type: PropTypes.Boolean,
},
withOverlay: {
defaultValue: true,
value: true,
type: PropTypes.Boolean,
},
withPointer: {
defaultValue: true,
value: true,
type: PropTypes.Boolean,
},
},
scope: {
Tooltip,
Text,
Modal,
},
imports: {
"react-native-elements": {
named: ["Tooltip", "Text"],
},
"modal-react-native-web": {
default: "Modal",
},
},
});
return (
<React.Fragment>
<Playground params={params} />
</React.Fragment>
);
}
