react-native-elements#Divider TypeScript Examples
The following examples show how to use
react-native-elements#Divider.
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: ConfigurableProductOptions.tsx From magento_react_native_graphql with MIT License | 6 votes |
|
ConfigurableProductOptions: React.FC<Props> = ({
options,
selectedConfigurableProductOptions,
handleSelectedConfigurableOptions,
}) => {
const renderOption = (item: ConfigurableOptionType) => (
<View key={String(item.id)} style={styles.container}>
<Text h3 h3Style={styles.label}>
{item.label}
</Text>
<ConfigurableOptionValues
values={item.values}
optionCode={item.attributeCode}
selectedIndex={selectedConfigurableProductOptions[item.attributeCode]}
handleSelectedConfigurableOptions={handleSelectedConfigurableOptions}
/>
</View>
);
return (
<>
<Divider style={styles.divider} />
{options?.map(renderOption)}
<Divider />
</>
);
}
Example #2
| Source File: ResponseErrorOverlay.tsx From react-native-network-client with Apache License 2.0 | 5 votes |
|
ResponseErrorOverlay = ({
error,
visible,
setVisible,
}: ResponseErrorOverlayProps) => {
const hide = () => setVisible(false);
return (
<Overlay
isVisible={visible}
onBackdropPress={hide}
overlayStyle={{ marginHorizontal: 20, marginVertical: 40 }}
testID="response_error_overlay"
>
<>
<Button title="Close" onPress={hide} />
<Text h2 style={{ alignSelf: "center" }}>
Error
</Text>
<Text h4>Code</Text>
<Text testID="response_error_overlay.error.code.text">
{error?.code}
</Text>
<Divider />
<Text h4>Message</Text>
<Text testID="response_error_overlay.error.message.text">
{error?.message}
</Text>
<Divider />
<Text h4>Domain</Text>
<Text testID="response_error_overlay.error.domain.text">
{error?.domain}
</Text>
<Divider />
<Text h4>User Info</Text>
<Text testID="response_error_overlay.error.user_info.text">
{JSON.stringify(error?.userInfo)}
</Text>
<Divider />
<Text h4>Native Stack</Text>
<ScrollView>
<Text testID="response_error_overlay.error.native_stack.text">
{JSON.stringify(
error?.nativeStackAndroid || error?.nativeStackIOS
)}
</Text>
</ScrollView>
</>
</Overlay>
);
}
Example #3
| Source File: ResponseSuccessOverlay.tsx From react-native-network-client with Apache License 2.0 | 5 votes |
|
ResponseSuccessOverlay = ({
response,
visible,
setVisible,
}: ResponseSuccessOverlayProps) => {
const hide = () => setVisible(false);
return (
<Overlay
isVisible={visible}
onBackdropPress={hide}
overlayStyle={{ marginHorizontal: 20, marginVertical: 40 }}
testID="response_success_overlay"
>
<>
<Button title="Close" onPress={hide} />
<Text h4>OK</Text>
<Text testID="response_success_overlay.success.ok.text">
{response?.ok.toString()}
</Text>
<Divider />
<Text h4>Code</Text>
<Text testID="response_success_overlay.success.code.text">
{response?.code}
</Text>
<Divider />
{Boolean(response?.redirectUrls?.length) && (
<>
<Text h4>Redirect URLs</Text>
<Text testID="response_success_overlay.success.redirect_urls.text">
{response!.redirectUrls!.join(", ")}
</Text>
<Divider />
</>
)}
<Text h4>Retries Exhausted?</Text>
<Text testID="response_success_overlay.success.retries_exhausted.text">
{response?.hasOwnProperty("retriesExhausted")
? response.retriesExhausted!.toString()
: "null"}
</Text>
<Divider />
<Text h4>Headers</Text>
<ScrollView>
<Text testID="response_success_overlay.success.headers.text">
{JSON.stringify(response?.headers, null, 2)}
</Text>
</ScrollView>
<Divider />
<Text h4>Data</Text>
<ScrollView>
<Text testID="response_success_overlay.success.data.text">
{JSON.stringify(response?.data, null, 2)}
</Text>
</ScrollView>
</>
</Overlay>
);
}
Example #4
| Source File: About.tsx From wuhan2020-frontend-react-native-app with MIT License | 4 votes |
|
function About() {
const [loadingWebview, setLoading] = useState(true);
return (
<StatusBarSafeLayout>
<ScrollView>
<View style={styles.container}>
<View>
<Text style={styles.header}>数据来源</Text>
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://github.com/wuhan2020/wuhan2020')
}>
https://github.com/wuhan2020/wuhan2020
</Text>
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://3g.dxy.cn/newh5/view/pneumonia')
}>
丁香园
</Text>
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://2019ncov.nosugartech.com/')
}>
https://2019ncov.nosugartech.com/
</Text>
<Text
style={styles.link}
onPress={() =>
Linking.openURL('http://ncov.news.dragon-yuan.me/')
}>
http://ncov.news.dragon-yuan.me/
</Text>
</View>
<Divider style={styles.divider} />
<View>
<Text style={styles.header}>wuhan2020</Text>
<Text style={{ lineHeight: 18 }}>
我们是 GitHub
开源社区的志愿者核心团队，在抗击非冠病毒的战役中，我们希望通过共同构建一个开源信息共享项目，帮助武汉自组织救援工作更有效、更准确地开展。我们当前在做的事是：建立一个医院、工厂、采购等信息实时同步的数据服务，同时召集所有希望对这次抗击病毒战役进行贡献的人，让每个具有相关技能的人都可以参与相关主题的开发工作，用开源的社区文化，以自组织协作的方式完成。
</Text>
</View>
<Divider style={styles.divider} />
<View>
<Text style={styles.header}>加入我们</Text>
<Text style={{ lineHeight: 18 }}>
如果你也想加入我们，可以通过以下方式：
</Text>
<View>
<ListItem
title="加入我们"
rightAvatar={
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://github.com/wuhan2020/wuhan2020')
}>
点击此链接了解详情
</Text>
}
/>
<ListItem
title="GitHub"
rightAvatar={
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://github.com/wuhan2020/wuhan2020')
}>
GitHub
</Text>
}
/>
</View>
</View>
<Divider style={styles.divider} />
<View>
<Text style={styles.header}>建议</Text>
<Text style={{ lineHeight: 18 }}>
如果你有任何好的建议，无论是对我们的项目还是这个App都可以发邮件至
</Text>
<Text
style={[styles.link, { marginVertical: 5 }]}
onPress={() => Linking.openURL('mailto:[email protected]')}>
[email protected]
</Text>
</View>
<Divider style={styles.divider} />
<View>
<Text style={styles.header}>其他信息</Text>
<ListItem title="版本" rightAvatar={<Text>1.0.0</Text>} />
<ListItem title="技术" rightAvatar={<Text>React Native</Text>} />
<ListItem
title="代码库"
rightAvatar={
<Text
style={styles.link}
onPress={() =>
Linking.openURL(
'https://github.com/wuhan2020/wuhan2020-frontend-react-native-app',
)
}>
GitHub
</Text>
}
/>
<ListItem
title="作者"
rightAvatar={
<Text
style={styles.link}
onPress={() =>
Linking.openURL('https://github.com/geastwood')
}>
geastwood（飞）
</Text>
}
/>
</View>
<Divider style={styles.divider} />
</View>
</ScrollView>
</StatusBarSafeLayout>
);
}
