diff --git a/README.md b/README.md index 47e62d7..2fde06e 100644 --- a/README.md +++ b/README.md @@ -29,6 +29,7 @@ const data: SettingsData = [ { type: 'SECTION', header: 'My Section'.toUpperCase(), + visible: true, footer: 'Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.', rows: [ @@ -41,6 +42,7 @@ const data: SettingsData = [ title: 'This row has a', subtitle: 'Subtitle', showDisclosureIndicator: true, + visible: myPermissionCheckFunction(), }, { title: 'Long title. So long long long long long long long', diff --git a/SettingsScreenExample/lib/Row.tsx b/SettingsScreenExample/lib/Row.tsx index 10346df..e4a2aa1 100644 --- a/SettingsScreenExample/lib/Row.tsx +++ b/SettingsScreenExample/lib/Row.tsx @@ -11,7 +11,8 @@ export interface RowData { subtitleStyle?: TextStyle onPress?: () => void showDisclosureIndicator?: boolean - renderAccessory?: () => React.ReactElement + renderAccessory?: () => React.ReactElement, + visible?: boolean, } export interface Props extends RowData { @@ -27,6 +28,7 @@ export const Row = ({ onPress, showDisclosureIndicator, renderAccessory, + visible, titleStyles, subtitleStyles, @@ -34,6 +36,7 @@ export const Row = ({ isLast, }: Props) => { let ContentContainer = onPress ? TouchableOpacity : View + if (visible === false) return null; return ( diff --git a/SettingsScreenExample/lib/Section.tsx b/SettingsScreenExample/lib/Section.tsx index 3dc0da0..6ca7727 100644 --- a/SettingsScreenExample/lib/Section.tsx +++ b/SettingsScreenExample/lib/Section.tsx @@ -9,6 +9,7 @@ export interface SectionData { key?: string header?: string footer?: string | (() => React.ReactElement) + visible?: boolean, rows: RowData[] } @@ -41,6 +42,7 @@ export const Section = ({ section, globalTextStyle }: SectionProps) => { subtitleStyles={[globalTextStyle, rowData.subtitleStyle]} isFirst={isFirst} isLast={isLast} + visible={rowData.visible} />, ) } diff --git a/SettingsScreenExample/lib/SettingsScreen.tsx b/SettingsScreenExample/lib/SettingsScreen.tsx index 6a8f6be..dacd11a 100644 --- a/SettingsScreenExample/lib/SettingsScreen.tsx +++ b/SettingsScreenExample/lib/SettingsScreen.tsx @@ -10,6 +10,7 @@ export type SettingsDatum = CustomViewData | SectionData export interface CustomViewData { type: 'CUSTOM_VIEW' key?: string + visible?: boolean, render: () => React.ReactElement } @@ -24,7 +25,7 @@ export class SettingsScreen extends React.Component { state = { refreshing: false } render() { - const elements = this.props.data.map((item, i) => { + const elements = this.props.data.filter(x => x.visible !== false).map((item, i) => { switch (item.type) { case 'CUSTOM_VIEW': return {item.render()}