react-native-paper#Button JavaScript Examples

function SyncButton ({group, game_id}) {
  const [pressed,setPressed] = React.useState(false);
  const theme = useSelector(i=>i.themes[i.theme]);
  const data = useAPIRequest(pressed?{
    cuppazee: true,
    endpoint: "clan/shadow/generate/v2",
    data: {
      game_id,
      group
    }
  }:null);
  if(pressed && !data) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64 }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if(pressed) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", minHeight: 64}}>
      <MaterialCommunityIcons name="check-bold" size={32} color={theme.page_content.fg} />
    </View>
  }
  return <View style={{padding: 4}}>
    <Button color={(theme.clan_header||theme.navigation).bg} mode="contained" onPress={()=>setPressed(true)}>
      Sync Shadow Players in {group}
    </Button>
  </View>
}

function AppButton(props) {
  return (
    <Button
      labelStyle={[styles.label, { ...props.labelStyles }]}
      mode="contained"
      uppercase={false}
      onPress={() => props.onSubmit()}
      loading={props.isLoadingVisible}
      style={[styles.container, { ...props.style }]}>
      {props.title}
    </Button>
  );
}

export default function PaperButton({
  onPressEvent, buttonText,
  mode, compact, icon, disabled, loading,
  style
}) {
  return (
    <Button
      icon={icon || ''}
      mode={mode || 'contained'}
      disabled={!!disabled}
      theme={theme}
      style={[layout.button, style]}
      onPress={onPressEvent}
      compact={!!compact}
      loading={!!loading}
    >
      {buttonText}
    </Button>
  );
}

AddScreen = () => {
  const {client} = useIpfs();

  return (
    <View>
      <Button mode="contained" onPress={addString(client)}>
        Add string
      </Button>
      <Button mode="contained" onPress={addUint8Array(client)}>
        Add Uint8Array
      </Button>
      <Button mode="contained" onPress={addUint8Arrays(client)}>
        Add Uint8Arrays
      </Button>
      <Button mode="contained" onPress={addNumbers(client)}>
        Add numbers
      </Button>
      <Button mode="contained" onPress={addBlob(client)}>
        Add blob
      </Button>
    </View>
  );
}

Bars = ({ name, icon, end }) => {
  const { colors } = useTheme();
  return (
    <>
      <View style={styles.mathProgressText}>
        <Button theme={{ colors: { primary: colors.text } }} icon={icon}>
          {i18n.t(name)}
        </Button>
        <Text>{end}%</Text>
      </View>
      <ProgressBar progress={end / 100} style={styles.matchProgressBar} />
    </>
  );
}

DefaultButton = ({
  theme,
  label,
  size,
  mode,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()

  const contentStyle = (size === 'compact') ? styling.compactContent : styling.defaultContent
  const colorStyle = (mode === 'contained') ? { color: theme.colors.buttonText } : {}

  return (
    <View style={styling.root}>
      <Button {...props} contentStyle={contentStyle} uppercase={false} compact mode={mode} labelStyle={[styling.text, colorStyle]}>
        {label}
      </Button>
    </View>
  )
}

BottomSheet = ({isOpen, closeBottomSheet, options}) => {
  return (
    <Modal
      testID={'modal'}
      isVisible={isOpen}
      onSwipeComplete={closeBottomSheet}
      onBackButtonPress={closeBottomSheet}
      onBackdropPress={closeBottomSheet}
      swipeDirection={['down']}
      style={styles.view}>
      <View style={styles.content}>
        <Text style={styles.contentTitle}>What do you wanna do?</Text>
        {options.map((item) => {
          const {text, onPress} = item;
          return (
            <Button
              key={text}
              mode="text"
              labelStyle={styles.contentOptions}
              onPress={onPress}>
              {text}
            </Button>
          );
        })}
        <Button
          key="cancel"
          mode="text"
          color={DarkTheme.colors.error}
          labelStyle={styles.contentOptions}
          onPress={closeBottomSheet}>
          Cancel
        </Button>
      </View>
    </Modal>
  );
}

render() {
    return (
      <View style={styles.oauthButtons}>
        <Button
          icon="facebook"
          mode="outlined"
          color="#0D47A1"
          style={styles.oauthButton}
          accessibilityLabel="Sign In With Facebook"
          onPress={this.onFacebookSignIn}
          loading={this.props.isSigning && this.props.type === 'facebook'}
          disabled={this.props.isSigning}
        >
          Facebook
        </Button>
        <Button
          icon="google"
          mode="outlined"
          color="#f44336"
          style={styles.oauthButton}
          accessibilityLabel="Sign In With Google"
          onPress={this.onGoogleSignIn}
          loading={this.props.isSigning && this.props.type === 'google'}
          disabled={this.props.isSigning}
        >
          Google
        </Button>
      </View>
    );
  }

Footer = () => (
  <SafeAreaView>
    <Divider />
    <View style={styles.footer}>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.cancel}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Cancel
        </Button>
      </View>
      <View style={{ flex: 1 }}>
        <Button
          style={styles.btn}
          labelStyle={styles.ok}
          mode="text"
          onPress={() => console.log('Pressed')}>
          Reschedule
        </Button>
      </View>
    </View>
  </SafeAreaView>
)

export default function Create() {
    const [title, setTitle] = useState("")
    const [body, setbody] = useState("")

    const createTwoButtonAlert = () =>
        Alert.alert(
            "Alert",
            "Add Blog through our website",
            [
                {
                    text: "Cancel",
                    onPress: () => console.log("Cancel Pressed"),
                    style: "cancel"
                },
                { text: "OK", onPress: () => Linking.openURL('http://getplaced.pythonanywhere.com/Add_Blog_Post/') }
            ]
        );

    return (
        <View>
            <TextInput style={styles.inputStyle}
                label="Title"
                value={title}
                mode="outlined"
                onChangeText={text => setTitle(text)}
                outlineColor="#002223"
            />
            <TextInput style={{ marginTop: 10, padding: 8, }}
                label="Body"
                value={body}
                mode="outlined"
                onChangeText={text => setbody(text)}
            />
            <Button style={{ marginTop: 30, width: 180, marginLeft: 100, }}
                icon="pencil"
                mode="contained"
                color="#002223"
                onPress={createTwoButtonAlert}
            >Post Blog</Button>
        </View>
    )
}

export default function AuthScreen({route}) {
  var { t } = useTranslation();
  var theme = useSelector(i => i.themes[i.theme]);
  var [status, setStatus] = React.useState(0);
  const navigation = useNavigation();
  const discovery = {
    authorizationEndpoint: 'https://api.munzee.com/oauth',
    tokenEndpoint: 'https://api.munzee.com/oauth/login',
  };
  const data = useAPIRequest({
    endpoint: 'competition/join/v1',
    cuppazee: true,
    data: {
      username: route.params.username
    }
  })
  const config = data?.team === "pear" ? config_pear : config_pine;

  const [request, response, promptAsync] = AuthSession.useAuthRequest(
    {
      clientId: config.client_id,
      scopes: ['read'],
      redirectUri: config.redirect_uri,
      state: JSON.stringify({
        redirect: Oconfig.redirect_uri,
        platform: Platform.OS
      })
    },
    discovery
  );

  React.useEffect(() => {
    if (response) {
      (async function () {
        if (!response.params || !response.params.teaken) return setStatus("invalid_response");
        if(response.params.status) {
          setStatus(`success_${response.params.status}`);
        } else {
          setStatus("success");
        }
      })()
    }
  }, [response]);
  if (status === "loading") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      <ActivityIndicator size="large" color={theme.page_content.fg} />
    </View>
  }
  if (status === "success" || status === "success_reopt" || status === "success_already") {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
      {status !== "success_already" && <>
        <Image source={data?.team === "pine" ? require('assets/pine.png') : require('assets/pear.png')} style={{ height: 128, width: 128, borderRadius: 8, marginBottom: 16 }} />
        <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{response.params.username} {status === "success" ? "has joined" : "is in"} Team {data?.team.toUpperCase() || '???¿??'}</Text>
      </>}
      <Button mode="contained" onPress={()=>navigation.replace('CompetitionHome')}>Return to Competition Dashboard</Button>
    </View>
  }
  return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page_content.bg }}>
    {!!status && <>
      {statusIcons[status]==="loading"?<ActivityIndicator size="large" color={theme.page_content.fg} />:<MaterialCommunityIcons name={statusIcons[status]} color={theme.page.fg} size={48} />}
      <Text allowFontScaling={false} style={{ fontSize: 16, fontWeight: "bold", textAlign: "center", color: theme.page_content.fg }}>{statusMessages[status]}</Text>
    </>}
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 24 }}>Opt-in to Competition</Text>
    <Text allowFontScaling={false} style={{ color: theme.page_content.fg, fontSize: 16 }}>{t('auth:tap')}</Text>
    <IconButton
      disabled={!data || (status && status !== "invalid_response")}
      size={32}
      onPress={() => {
        setStatus("waiting_for_login");
        promptAsync({
          useProxy: Oconfig.useProxy,
          redirectUri: config.redirect_uri
        });
      }}
      color={theme.page_content.fg}
      icon="login-variant"
    />
  </View>
}

OrderConfirmed = ({ navigation }) => {

    const goToHome = () => {
        navigation.dispatch(
            CommonActions.reset({
                index: 0,
                routes: [
                    {
                        name: 'HomeMain',
                    },
                ],
            })
        );
    }

    return (
        <View style={{
            height: Dimensions.get("window").height,
            backgroundColor: colors.back,
            justifyContent: "center",
            alignItems: "center"
        }}>
            <Icon name="checkbox-marked-circle-outline" size={100} color={colors.accentPrimary}></Icon>
            <Text style={{
                fontSize: 17, color: colors.accentPrimary, marginTop: 10,
            }}>Your Order Is Confirmed</Text>
            <Button
                icon="home"
                color={colors.accentPrimary}
                style={{
                    marginTop: 20
                }}
                dark
                mode="contained"
                size={20}
                onPress={() => goToHome()}
            >Home</Button>
        </View>
    )
}

export default function UseCameraRoll(
  { formikProps, formikKey, setImage }
) {
  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        await ImagePicker.requestMediaLibraryPermissionsAsync().then((status) => {
          if (status.status !== 'granted') {
            // await Permissions.askAsync(Permissions.CAMERA_ROLL)
            alert(I18n.t('camera.sorryAlert')); // eslint-disable-line
          }
        }, (error) => {
          console.log(error); // eslint-disable-line
        });
        // const { status } = await Permissions.getAsync(Permissions.CAMERA_ROLL)
      }
    })();
  }, []);

  const pickImage = async () => {
    const result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
      base64: true
    });

    if (!result.cancelled) {
      setImage(result.uri);
      formikProps.setFieldValue(formikKey, `data:image/jpg;base64,${result.base64}`);
    }
  };

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button onPress={pickImage}>{I18n.t('camera.useImage')}</Button>
    </View>
  );
}

GetScreen = () => {
  const {client} = useIpfs();

  const get = async () => {
    const CID = 'QmfGBRT6BbWJd7yUc2uYdaUZJBbnEFvTqehPFoSMQ6wgdr';
    try {
      console.log('Demo App .get start');

      for await (const file of client.get(CID)) {
        if (!file.content) {
          continue;
        }

        const content = [];

        for await (const chunk of file.content) {
          content.push(chunk);
        }

        console.log(
          'Demo App .get',
          inspect({
            file,
            content,
          }),
        );
      }
    } catch (error) {
      console.error('Demo App .get', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={get}>
        Press me
      </Button>
    </View>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function NameScreen({ navigation }) {
  const dispatch = useGlobals()[1];
  const [name, setName] = React.useState();
  const { colors } = useTheme();
  const buttonDisabled = !name || name.length < 2;
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { name },
    });
    navigation.push('BirthDate');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Aquarius width={60} height={60} style={styles.aquarius} />
      <Backgrounds.Constellation
        color={colors.text}
        dotColor={colors.primary}
        height={180}
        width={180}
        style={styles.constellation}
      />
      <View style={{ flex: 0.5 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t("What's your name?")}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            'In order to give you accurate and personal information we need to know some info'
          )}
        </Text>
      </View>
      <View style={styles.inputContainer}>
        <CustomInput
          value={name}
          placeholder={i18n.t('Write here')}
          onChangeText={(text) => setName(text)}
          style={{ fontSize: 12 }}
          maxLength={20}
        />
      </View>
      <View style={styles.buttonContainer}>
        <Button
          mode="contained"
          disabled={buttonDisabled}
          onPress={_handleContinue}
        >
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

Modal = ({
  theme,
  navigation,
  ...props
}) => {
  const styling = styles(theme)
  const { t } = useTranslation()
  
  const cancelAction = props.cancelAction || navigation.getParam('cancelAction')
  const cancelLabel = props.cancelLabel || navigation.getParam('cancelLabel')
  const confirmLabel = props.confirmLabel || navigation.getParam('confirmLabel')
  const confirmAction = props.confirmAction || navigation.getParam('confirmAction')
  const title = props.title || navigation.getParam('title')
  const text = props.text || navigation.getParam('text')

  return (
    <View style={styling.root}>
      <View style={styling.modal}>
        <View style={styling.text}>
          <Title>{title}</Title>
        </View>

        <View style={styling.text}>
          <Text>{text}</Text>
        </View>

        <View style={styling.action}>
          <Button mode="contained" onPress={confirmAction}>
            {confirmLabel}
          </Button>
        </View>

        <View style={styling.action}>
          <Button mode="text" onPress={cancelAction}>
            {cancelLabel}
          </Button>
        </View>
      </View>
    </View>
  )
}

function HexPads(props) {
  const {addByteToCmd} = props;
  const [value, setValue] = React.useState('');
  const values = Array.from({length: 16});
  const rows = values.reduce((acc, _, idx) => {
    if (idx % 4 === 0) {
      acc.push([]);
    }

    acc[acc.length - 1].push(idx);
    return acc;
  }, []);

  function addHexChar(c) {
    if (value.length === 1) {
      addByteToCmd(parseInt(value + c, 16));
      setValue('');
    } else {
      setValue(c);
    }
  }

  return (
    <View>
      {rows.map((row, idx) => (
        <View key={idx} style={{flexDirection: 'row', padding: 10}}>
          {row.map((hex) => {
            const c = hex.toString(16).toUpperCase();
            return (
              <Button
                key={c}
                mode={value === c ? 'contained' : 'text'}
                // issue #24: force the elevation to 0 to workaround
                style={{elevation: 0}}
                onPress={() => addHexChar(c)}>
                {c}
              </Button>
            );
          })}
        </View>
      ))}
    </View>
  );
}

render() {
    const {enrolledBy, btnLoading, isBottomSheetOpen} = this.state;

    return (
      <View style={styles.boxScreenContainer}>
        <View style={styles.authorContainer}>
          <Headline style={Styles.fontMedium}>
            Author: {this.state.auth[0]}
          </Headline>
        </View>
        <View style={styles.addPartConatiner}>
          <Text style={Styles.fontSmall}>Add Participant</Text>
          <TextInput
            style={[Styles.fontMedium, styles.textInput]}
            mode="outlined"
            placeholder="Email"
            maxLength={50}
            value={this.state.email}
            dense={true}
            onChangeText={(email) => this.setAddParticipant(email)}
          />
          <Button
            labelStyle={Styles.fontSmall}
            loading={btnLoading}
            icon="plus"
            onPress={() => this.handleAddUser()}>
            Add Member
          </Button>
        </View>
        <FlatList
          ListHeaderComponent={() => {
            return (
              <Text style={Styles.fontSmall}>
                Enrolled Users: {enrolledBy.length}
              </Text>
            );
          }}
          ListHeaderComponentStyle={{margin: 10}}
          ListEmptyComponent={() => {
            return <ActivityIndicator />;
          }}
          data={enrolledBy}
          keyExtractor={(item) => item.uid}
          renderItem={({item, index}) => {
            return (
              <Card
                style={styles.card}
                onPress={() => this.handleOptions(index)}>
                <Card.Content>
                  <Subheading style={Styles.fontMedium}>{item.name}</Subheading>
                </Card.Content>
              </Card>
            );
          }}
          ItemSeparatorComponent={() => <Divider style={styles.Divider} />}
        />
        <BottomSheet
          isOpen={isBottomSheetOpen}
          closeBottomSheet={() => this.setBottomSheet(false)}
          options={[{text: 'Remove User', onPress: this.handleRemoveUser}]}
        />
      </View>
    );
  }

Item = ({ item }) => {
  const { id, name, startTime, endTime, tags, avatar } = item;
  const navigation = useNavigation();
  const isTablet = DeviceInfo.isTablet();

  const dispatch = useDispatch();
  const onSelected = () => {
    dispatch(appointmentActions.appointmentSelected(id));
    if (!isTablet) {
      navigation.navigate('AppointmentDetail');
    }
  };

  return (
    <Card style={styles.card}>
      <ProfileCard name={name} avatar={avatar} onSelected={onSelected} />
      <Card.Content>
        <Divider />
        <Text style={styles.duration}>
          {startTime} - {endTime}
        </Text>
        <View style={styles.tags}>
          {tags.map((itx, i) => {
            const { labelColor, buttonColor } = random_rgba();
            return (
              <Button
                key={i}
                mode="contained"
                disabled
                compact
                uppercase={false}
                style={[styles.tag, { backgroundColor: buttonColor }]}
                labelStyle={[styles.tagLabel, { color: labelColor }]}>
                {itx}
              </Button>
            );
          })}
        </View>
      </Card.Content>
    </Card>
  );
}

function App() {
  let [fontsLoaded] = useFonts(Platform.OS == "web" ? {
    // Coiny_400Regular,
  } : {
      Coiny_400Regular,
      Roboto_100Thin,
      Roboto_300Light,
      Roboto_400Regular,
      Roboto_500Medium,
      Roboto_700Bold,
      Roboto_900Black,
    });
  const loadingLogin = useSelector(i => i.loadingLogin || i.version < 0);
  const version = useSelector(i => i.version);
  const ref = React.useRef();
  const dispatch = useDispatch();
  const { t } = useTranslation();

  const { getInitialState } = useLinking(ref, {
    prefixes: ['https://cuppazee.app', 'cuppazee://'],
    config: {
      __primary: {
        screens: {
          ...pageScreens,
          Auth: 'auth',
        },
      }
    },
  });
  var [isReady, setIsReady] = React.useState(false);
  var [initialState, setInitialState] = React.useState();
  var theme = useSelector(i => i.themes[i.theme])

  React.useEffect(() => {
    Promise.race([
      getInitialState(),
      new Promise(resolve =>
        setTimeout(resolve, 150)
      )
    ])
      .catch(e => {
        console.error(e);
      })
      .then(state => {
        if (state !== undefined) {
          setTimeout(() => dispatch(setCurrentRoute(state?.routes?.[0]?.state?.routes?.slice?.()?.reverse?.()?.[0] ?? {})), 100);
          setInitialState(state);
        }

        setIsReady(true);
      });
  }, [getInitialState]);

  function handleStateChange(a) {
    dispatch(setCurrentRoute(a?.routes?.[0]?.state?.routes?.slice?.()?.reverse?.()?.[0] ?? {}))
  }

  if (!theme || !theme.page || !theme.page.bg) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: 'white' }}>
      <ActivityIndicator size="large" color="orange" />
    </View>;
  }
  if (!fontsLoaded) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
      <ActivityIndicator size="large" color={theme.page.fg} />
    </View>;
  }
  if (loadingLogin) {
    return <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: theme.page.bg }}>
      <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 20, color: theme.page.fg, marginBottom: 20 }}>{t('common:logging_in')}</Text>
      <ActivityIndicator size="large" color={theme.page.fg} />
    </View>;
  }
  if (version != Math.max(...Object.keys(changelogs).map(Number))) {
    var arr = Object.keys(changelogs).map(Number).filter(i => i > version).slice(-10).sort((a, b) => a - b);
    var logs = arr.map(i => [i, changelogs[i]])
    return <SafeAreaView style={{ backgroundColor: theme.navigation.bg, height: "100%" }}>
      <ScrollView
        style={{ flex: 1 }}
        contentContainerStyle={{ padding: 8, justifyContent: "center", alignItems: "center", flexGrow: 1 }}>
        {logs.map(([build, log]) => <View style={{ maxWidth: "100%" }}>
          <View style={{ alignItems: "center" }}>
            <Text allowFontScaling={false} style={{ color: theme.navigation.fg, fontSize: 32, ...font("bold") }}>{t('changelog:build_n', { n: build })}</Text>
          </View>
          {log?.map(i => <View style={{ flexDirection: "row", alignItems: "center", width: 400, maxWidth: "100%" }}>
            {i.image && <Image source={getIcon(i.image)} style={{ height: 48, width: 48 }} />}
            {i.icon && <View style={{ height: 48, width: 48, backgroundColor: theme.page_content.bg, borderRadius: 24, justifyContent: "center", alignItems: "center" }}>
              <MaterialCommunityIcons size={32} color={theme.page_content.fg} name={i.icon} />
            </View>}
            <View style={{ padding: 8, flex: 1 }}>
              <Text allowFontScaling={false} style={{ color: theme.navigation.fg, fontSize: 20, ...font("bold") }}>{i.title}</Text>
              <Text allowFontScaling={false} style={{ color: theme.navigation.fg, fontSize: 16, ...font() }}>{i.description}</Text>
            </View>
          </View>) ?? <Text allowFontScaling={false} style={{ ...font("bold"), fontSize: 20, color: theme.page.fg, marginBottom: 20 }}>{t('changelog:no_changelog')}</Text>}
          {build == Math.max(...Object.keys(changelogs).map(Number)) && <Button mode="contained" style={{ borderWidth: theme.page_content.border ? 2 : 0, borderColor: theme.page_content.border }} color={theme.page_content.bg} onPress={() => {
            dispatch(cuppazeeVersion(Math.max(...Object.keys(changelogs).map(Number))))
          }}>{logs.some(i=>i[1].some(x=>x.privacy))?t('changelog:continue_and_agree'):t('changelog:continue')}</Button>}
        </View>)}
      </ScrollView>
    </SafeAreaView>;
  }
  if (!isReady) {
    return null;
  }
  var navWidth = 400;
  return (
    <NavigationContainer independent={true} onStateChange={handleStateChange} initialState={initialState} ref={ref}>
      <StatusBar translucent={true} backgroundColor={theme.navigation.bg + 'cc'} barStyle="light-content" />
      <View style={{ flex: 1 }}>
        <DrawerNav />
        {/* <View style={{position:"absolute",bottom:-0.5*navWidth,right:-0.5*navWidth,width:navWidth,height:navWidth,borderRadius:navWidth/2,paddingBottom:navWidth/2,paddingRight:navWidth/2,backgroundColor:"white"}}><Text>Hello</Text></View> */}
      </View>
    </NavigationContainer>
  );
}

AssetSearchbar = ({ setSelectedAsset, surveyingOrganization }) => {
  const [query, setQuery] = useState('');
  const [assetData, setAssetData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [online, setOnline] = useState(true);
  const [searchTimeout, setSearchTimeout] = useState(null);

  useEffect(() => {
    checkOnlineStatus().then(async (connected) => {
      if (connected) fetchData(true, '');
      if (!connected) fetchData(false, '');
    });
  }, [surveyingOrganization]);

  // remove this offline portion if he says no offline
  const fetchOfflineData = async () => {
    setOnline(false);

    await getData('assetData').then(() => {
      if (assetData) {
        let offlineData = [];
        getData('offlineAssetIDForms').then((offlineAssetData) => {
          if (offlineAssetData !== null) {
            Object.entries(offlineAssetData).forEach(([key, value]) => { //eslint-disable-line
              offlineData = offlineData.concat(value.localObject);
            });
          }
          const allData = assetData.concat(offlineData);
          setAssetData(allData.slice() || []);
        });
      }
      setLoading(false);
    });
  };

  const fetchOnlineData = async () => {
    setOnline(true);

    assetDataQuery(surveyingOrganization).then((records) => {
      let offlineData = [];

      getData('offlineAssetIDForms').then((offlineAssetData) => {
        if (offlineAssetData !== null) {
          Object.entries(offlineAssetData).forEach(([key, value]) => { //eslint-disable-line
            offlineData = offlineData.concat(value.localObject);
          });
        }
      });

      const allData = records.concat(offlineData);
      setAssetData(allData.slice());
      setLoading(false);
    });
  };

  const fetchData = (onLine, qry) => {
    // remove this line if no offline too - 82
    if (!onLine) fetchOfflineData();
    if (onLine) fetchOnlineData(qry);
  };

  // probably not needed, this is all specific to the id form
  const filterOfflineList = () => assetData.filter(
    (listItem) => {
      // const listItemJSON = listItem.toJSON();
      const name = listItem.name || ' ';
      return name.toLowerCase().includes(query.toLowerCase());
    }
  );

  const onChangeSearch = (input) => {
    setLoading(true);

    if (input === '') setLoading(false);

    clearTimeout(searchTimeout);

    setQuery(input);

    setSearchTimeout(setTimeout(() => {
      fetchData(online, input);
    }, 1000));
  };

  const onSelectAsset = (listItem) => {
    setSelectedAsset(listItem);
    setQuery('');
  };

  const renderItem = ({ item }) => (
    <View>
      <Button onPress={() => onSelectAsset(item)} contentStyle={{ marginRight: 5 }}>
        <Text style={{ marginRight: 10 }}>{item.name}</Text>

        <View style={{
          backgroundColor: '#f8380e',
          width: 1,
          height: 10,
          paddingLeft: 10,
          marginTop: 'auto',
          marginBottom: 'auto',
          borderRadius: 20
        }}
        />
      </Button>
    </View>
  );

  return (
    <View>
      <Headline style={styles.header}>{I18n.t('assetSearchbar.searchIndividual')}</Headline>
      <Searchbar
        placeholder={I18n.t('assetSearchbar.placeholder')}
        onChangeText={onChangeSearch}
        value={query}
      />
      {!online
        && <Button onPress={() => fetchData(false, '')}>{I18n.t('global.refresh')}</Button>}
      {loading
        && <Spinner color="blue" />}
      {query !== '' && (
        <FlatList
          data={filterOfflineList(assetData)}
          renderItem={renderItem}
          keyExtractor={(item) => item.objectId}
        />
      )}
    </View>
  );
}

PubsubScreen = () => {
  const {
    client: {pubsub, swarm},
  } = useIpfs();

  const connect = async () => {
    try {
      console.log('Demo App .pubsub start');

      await swarm.connect(ADDR);

      console.log('Demo App .pubsub connect', {addr: ADDR});
    } catch (error) {
      console.error('Demo App .pubsub connect', {addr: ADDR, error});
    }
  };

  const disconnect = async () => {
    try {
      console.log('Demo App .disconnect start');

      await swarm.disconnect(ADDR);

      console.log('Demo App .pubsub disconnect', {addr: ADDR});
    } catch (error) {
      console.error('Demo App .pubsub disconnect', {addr: ADDR, error});
    }
  };

  const subscribe = async () => {
    try {
      console.log('Demo App .pubsub subscribe start');

      await pubsub.subscribe(TOPIC, handleMessage, {
        onError: handleError,
      });

      console.log('Demo App .pubsub subscribe', {topic: TOPIC});
    } catch (error) {
      console.error('Demo App .pubsub subscribe', {topic: TOPIC, error});
    }
  };

  const unsubscribe = async () => {
    try {
      console.log('Demo App .pubsub unsubscribe start');

      await pubsub.unsubscribe(TOPIC, handleMessage);

      console.log('Demo App .pubsub unsubscribe', {topic: TOPIC});
    } catch (error) {
      console.error('Demo App .pubsub unsubscribe', {topic: TOPIC, error});
    }
  };

  const publish = async () => {
    try {
      console.log('Demo App .pubsub publish start');

      const msg = new TextEncoder().encode('hello');
      await pubsub.publish(TOPIC, msg);

      console.log('Demo App .pubsub publish', {topic: TOPIC, msg});
    } catch (error) {
      console.error('Demo App .pubsub publish', {error});
    }
  };

  return (
    <View>
      <Button mode="contained" onPress={connect}>
        Connect
      </Button>
      <Button mode="contained" onPress={disconnect}>
        Disconnect
      </Button>
      <Button mode="contained" onPress={subscribe}>
        Subscribe
      </Button>
      <Button mode="contained" onPress={unsubscribe}>
        Unsubscribe
      </Button>
      <Button mode="contained" onPress={publish}>
        Publish
      </Button>
    </View>
  );
}

/**
 * @param navigation
 * @returns {*}
 * @constructor
 */
function BirthDateScreen({ navigation }) {
  const [{ session }, dispatch] = useGlobals();
  const { colors } = useTheme();
  const [date, setDate] = React.useState(new Date(642449499000));
  const [sign, setSign] = React.useState(
    ZodiacCalculator(date.getDate(), date.getMonth() + 1)
  );
  const [show, setShow] = React.useState(true);
  React.useLayoutEffect(() => {
    setSign(ZodiacCalculator(date.getDate(), date.getMonth() + 1));
  }, [date]);

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    Platform.isAndroid && setShow(Platform.isIos);
    setDate(currentDate);
  };
  const showDatePicker = () => {
    setShow(true);
  };
  const _handleContinue = () => {
    dispatch({
      type: 'setSession',
      fields: { birthDate: date.getTime(), sign },
    });
    navigation.push('Sex');
  };

  return (
    <DefaultView>
      <SpaceSky />
      <Scorpio width={60} height={60} style={styles.scorpio} />
      <Backgrounds.ConstellationSimple
        color={colors.text}
        dotColor={colors.primary}
        height={200}
        width={200}
        style={styles.constellation}
      />
      <View style={{ flex: 1 }} />
      <View style={styles.textContainer}>
        <Headline style={styles.textHeadline}>
          {i18n.t('Your date of birth')}
        </Headline>
        <Text style={styles.textText}>
          {i18n.t(
            '{name}, to give you accurate and personal information we need to know some info',
            { name: session.name }
          )}
        </Text>
      </View>
      <View style={styles.logoContainer}>
        <Sign sign={sign} width={50} showTitle={false} height={50} />
      </View>
      <Surface style={styles.dateContainer}>
        {Platform.isAndroid && (
          <Button style={{ alignSelf: 'center' }} onPress={showDatePicker}>
            {i18n.t('Press to change')}
          </Button>
        )}
        {show && (
          <RNDateTimePicker
            value={date}
            display="spinner"
            onChange={onChange}
            on
            minimumDate={new Date(1930, 0, 0)}
            maximumDate={new Date(2010, 0, 0)}
            textColor="#ffffff"
          />
        )}
        {Platform.isAndroid && (
          <View style={{ justifyContent: 'center', alignItems: 'center' }}>
            <Text style={{ fontSize: 40 }}>{DateUtils.toEuropean(date)}</Text>
          </View>
        )}
      </Surface>
      <View style={styles.buttonContainer}>
        <Button mode="contained" disabled={!date} onPress={_handleContinue}>
          {i18n.t('Continue')}
        </Button>
      </View>
    </DefaultView>
  );
}

function CustomTransceiveModal(props) {
  const {
    visible: _visible,
    setVisible: _setVisible,
    isEditing,
    editCommand,
  } = props;
  const [visible, setVisible] = React.useState(false);
  const animValue = React.useRef(new Animated.Value(0)).current;
  const [cmdType, setCmdType] = React.useState(CmdType.COMMAND);
  const [cmdBytes, setCmdBytes] = React.useState([]);
  const [delayMs, setDelayMs] = React.useState(100);

  React.useEffect(() => {
    if (_visible) {
      setVisible(true);
      Animated.timing(animValue, {
        duration: 300,
        toValue: 1,
        useNativeDriver: true,
      }).start();
    } else {
      Animated.timing(animValue, {
        duration: 200,
        toValue: 0,
        useNativeDriver: true,
      }).start(() => {
        setVisible(false);
      });
    }
  }, [_visible, animValue]);

  React.useEffect(() => {
    if (props.cmdType && props.cmdType !== cmdType) {
      setCmdType(props.cmdType);
    }
  }, [cmdType, props.cmdType]);

  function addByteToCmd(byte) {
    setCmdBytes([...cmdBytes, byte]);
  }

  function resetValues() {
    setCmdType(CmdType.COMMAND);
    setCmdBytes([]);
    setDelayMs(100);
  }

  function doAddCommand() {
    const cmd = {};
    if (cmdType === CmdType.COMMAND) {
      editCommand({
        type: 'command',
        payload: cmdBytes,
      });
    } else if (cmdType === CmdType.DELAY) {
      editCommand({
        type: 'delay',
        payload: delayMs,
      });
    }
    resetValues();
    _setVisible(false);
  }

  function doCancel() {
    resetValues();
    _setVisible(false);
  }

  const bgAnimStyle = {
    backgroundColor: 'rgba(0,0,0,0.3)',
    opacity: animValue,
  };

  const promptAnimStyle = {
    transform: [
      {
        translateY: animValue.interpolate({
          inputRange: [0, 1],
          outputRange: [550, 0],
        }),
      },
    ],
  };

  return (
    <Modal transparent={true} visible={visible}>
      <View style={[styles.wrapper]}>
        <View style={{flex: 1}} />

        <Animated.View style={[styles.prompt, promptAnimStyle]}>
          {!props.cmdType && (
            <View style={{flexDirection: 'row', alignItems: 'center'}}>
              <Text style={{marginRight: 10}}>Type: </Text>
              {Object.values(CmdType).map((type) => (
                <Button
                  key={type}
                  mode={type === cmdType ? 'outlined' : 'text'}
                  onPress={() => setCmdType(type)}
                  style={{flex: 1}}>
                  {type}
                </Button>
              ))}
            </View>
          )}

          {cmdType === CmdType.COMMAND && (
            <View
              style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              <Text style={{textAlign: 'center', letterSpacing: 1.2}}>
                {cmdBytes.length === 0 && '--'}
                {cmdBytes.reduce((acc, byte, idx) => {
                  const hexChar = (
                    '00' + byte.toString(16).toUpperCase()
                  ).slice(-2);
                  const sep = idx !== 0 && idx % 8 === 0 ? '\n' : ' ';
                  return acc + hexChar + sep;
                }, '')}
              </Text>
              <View style={{flexDirection: 'row'}}>
                <Button onPress={() => setCmdBytes(cmdBytes.slice(0, -1))}>
                  Del
                </Button>
                <Button onPress={() => setCmdBytes([])}>Clr</Button>
              </View>
              <HexPads addByteToCmd={addByteToCmd} />
            </View>
          )}

          {cmdType === CmdType.DELAY && (
            <View
              style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
              {[100, 200, 300, 400, 500, 600].map((ms) => (
                <Button
                  key={ms}
                  mode={ms === delayMs ? 'outlined' : 'text'}
                  onPress={() => setDelayMs(ms)}
                  style={{margin: 5}}>
                  {ms} ms
                </Button>
              ))}
            </View>
          )}

          <View style={{flexDirection: 'row'}}>
            <Button mode="contained" onPress={doAddCommand} style={{flex: 1}}>
              {isEditing ? 'Modify' : 'Add'}
            </Button>

            <Button onPress={doCancel} style={{flex: 1}}>
              CANCEL
            </Button>
          </View>
        </Animated.View>

        <Animated.View style={[styles.promptBg, bgAnimStyle]} />
      </View>
    </Modal>
  );
}

CollectionsIndexSearch = ({
  navigation,
  collections,
}) => {
  const [open, setOpen] = useState(false);

  /* var itemsList =
    [

    ]
  var itemNames = []
  var collectionNames = []
  if (Object.keys(collections).length > 0){
    for (const [key, value] of Object.entries(collections)) {

      if (collections[key] != null){
      collectionNames.push(collections[key].label);
      for (var j = 0; j < collections[key].tags.length; j++) {
        if (!itemNames.includes(collections[key].tags[j])) {
          itemNames.push(collections[key].tags[j])
        }
      }
    }
    }
  }

  for (var i in itemNames) {
    itemsList.push({label: itemNames[i], value: itemNames[i]})
  } */
  // const [items, setItems] = useState(itemsList);
  const [items, setItems] = useState([]);
  const [value, setValue] = useState([]);
  const [current, currentSelection] = useState(false);
  const [urgent, urgentSelection] = useState(false);
  const [collectionsList, editCollectionsList] = useState(collections);
  const [showSearch, setShowSearch] = useState(false);
  const [title, onChangeTitle] = useState('');
  const [notCurrent, setNotCurrent] = useState('');
  const [notUrgent, setNotUrgent] = useState('');

  const [showSearchText, setShowSearchText] = useState(false);
  const [threeLineDiv, setThreeLineDiv] = useState([]);
  const [disableReset, setDisableReset] = useState(true);

  // console.log("HOME PAGE")
  // console.log(collectionNames);
  useEffect(() => {
    const newCollectionsList = {};

    const itemsList = [

    ];
    const itemNames = [];
    const collectionNames = [];
    if (Object.keys(collections).length > 0) {
      Object.keys(collections).forEach((key) => {
        if (collections[key] != null) {
          collectionNames.push(collections[key].label);
          for (let j = 0; j < collections[key].tags.length; j += 1) {
            if (!itemNames.includes(collections[key].tags[j])) {
              itemNames.push(collections[key].tags[j]);
            }
          }
        }
      });
    }
    for (let i = 0; i < itemNames.length; i += 1) {
      itemsList.push({ label: itemNames[i], value: itemNames[i] });
    }

    setItems(itemsList);
    Object.keys(collections).forEach((i) => {
      let toAdd = true;
      if (title.length > 0 && toAdd) {
        if (!(collections[i].label.includes(title)) && !(collections[i].purpose.includes(title))) {
          toAdd = false;
          // console.log("oof urgent")
        }
      }
      for (let j = 0; j < value.length; j += 1) {
        if (toAdd && !(collections[i].tags.includes(value[j]))) {
          toAdd = false;
          // console.log("oof current")
        }
      }

      if (urgent && !(collections[i].urgent)) {
        toAdd = false;
      } else if (current && !(collections[i].current)) {
        toAdd = false;
      }
      if (notCurrent && (collections[i].current)) {
        toAdd = false;
      } else if (notUrgent && (collections[i].urgent)) {
        toAdd = false;
      }

      if (toAdd) {
        newCollectionsList[i] = collections[i];
      }
    });
    const searchText = [];
    // console.log(collectionsList)
    const threeLineSearchText = [];
    editCollectionsList(newCollectionsList);
    if (title.length > 0) {
      searchText.push(
        <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
          {' '}
          {'phrase: '}
        </Text>,
      );
      searchText.push(
        <Text style={{ padding: 0 }}>
          {' '}
          {title}
        </Text>,
      );
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'phrase: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {`${title}; `}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {}
          </Text>
        </View>,
      );
    }

    if (value.length > 0) {
      let tagList = '';
      for (let j = 0; j < value.length; j += 1) {
        tagList += value[j];
        if (j === value.length - 1) {
          tagList += ';';
        } else {
          tagList += ', ';
        }
      }
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'tags: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {tagList}
          </Text>
        </View>,
      );

      if (title.length > 0) {
        searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
      }
      searchText.push(
        <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
          {' '}
          {'selected tags: '}
        </Text>,
      );
      for (let j = 0; j < value.length; j += 1) {
        searchText.push(
          <Text style={{ padding: 0 }}>
            {' '}
            {value[j]}
          </Text>,
        );
        if (j !== value.length - 1) {
          searchText.push(<Text style={{ padding: 0 }}>{', '}</Text>);
        }
        if (j === value.length - 1 && (current || urgent || notCurrent || notUrgent)) {
          searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
        }
      }
    } else if (title.length > 0 && (current || urgent || notCurrent || notUrgent)) {
      searchText.push(<Text style={{ padding: 0 }}>{'; '}</Text>);
    }
    let priorityText = '';

    if (urgent) {
      searchText.push(<Text style={{ fontWeight: 'bold', padding: 0 }}>{'priority: '}</Text>);
      searchText.push(<Text>current, urgent;</Text>);
      priorityText = 'current, urgent;';
    } else if (current) {
      if (notUrgent) {
        searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
        searchText.push(<Text>current, not urgent;</Text>);
        priorityText = 'current, not urgent;';
      } else {
        searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
        searchText.push(<Text>current;</Text>);
        priorityText = 'current;';
      }
    }
    if (notCurrent) {
      searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
      searchText.push(<Text>{'not current, not urgent; '}</Text>);
      priorityText = 'not current, not urgent;';
    } else if (!current && notUrgent) {
      searchText.push(<Text style={{ fontWeight: 'bold' }}>{'priority: '}</Text>);
      searchText.push(<Text>not urgent;</Text>);
      priorityText = 'not urgent;';
    }
    if (current || urgent || notCurrent || notUrgent) {
      threeLineSearchText.push(
        <View style={styles.threeLineSummary}>
          <Text style={{ fontWeight: 'bold', marginLeft: -3, padding: 0 }}>
            {' '}
            {'priority: '}
          </Text>
          <Text style={{ padding: 0 }}>
            {' '}
            {priorityText}
          </Text>
        </View>,
      );
    }

    setThreeLineDiv(threeLineSearchText);

    if ((value.length > 0
      || title.length > 0 || current || urgent || notCurrent || notUrgent) && !showSearch) {
      setShowSearchText(true);
    } else {
      setShowSearchText(false);
    }
    if (value.length > 0
      || title.length > 0 || current || urgent || notCurrent || notUrgent) {
      setDisableReset(false);
    } else {
      setDisableReset(true);
    }
  }, [title, value, current, urgent, notCurrent, notUrgent, collections, showSearch]);
  Object.size = function (obj) {
    let size = 0;
    Object.keys(obj).forEach(() => {
      size += 1;
    });
    if (size === 1) {
      return ('1 Result');
    }
    return (`${size.toString()} Results`);
  };

  function reset() {
    onChangeTitle('');
    urgentSelection(false);
    currentSelection(false);
    setNotCurrent(false);
    setNotUrgent(false);
    setValue([]);
  }
  useEffect(() => { setOpen(false); }, [title, showSearch]);
  return (

    <SafeAreaView style={[styles.safeAreaView]}>
      {/* onPress={() => setShowSearch(!showSearch)}

      <TouchableOpacity
      style={styles.expandIcon}

      > */}

      <View style={styles.root}>
        <View style={styles.dateRangeContainer}>

          <Left>
            {!disableReset
            && (
            <Button
              style={styles.reset_button}
              color={Colors.destructive}
              mode="text"
              onPress={reset} /* eslint-disable-line react/jsx-no-bind */
            >
              RESET
            </Button>
            )}

          </Left>
          <TouchableOpacity onPress={() => setShowSearch(!showSearch)}>
            <View><Text style={styles.dash}>Search Collections</Text></View>
          </TouchableOpacity>

          <Right onPress={() => setShowSearch(!showSearch)}>
            <TouchableOpacity
              style={styles.leftRightPadding}
              onPress={() => setShowSearch(!showSearch)}
            >

              <Ionicons
                name={showSearch ? 'chevron-up' : 'chevron-down'}
                size={24}
                color={Colors.expandTimeline}
              />
            </TouchableOpacity>

          </Right>

        </View>
      </View>
      {/* </TouchableOpacity> */}

      {showSearch

    && (
    <KeyboardAvoidingView style={[styles.searchItemsDiv, styles.zindex]}>

      <View style={styles.searchBoxDiv}>

        <View style={styles.textInputContainer}>

          <TextInput
            onTouchStart={() => setOpen(false)}
            style={styles.textInput}
            value={title}
            onChangeText={onChangeTitle}
            placeholder="search Collections' names and purposes"
            placeholderTextColor="#777777"
            autoFocus
          />
        </View>
      </View>

      { // <View style={styles.dropDown}>
        // <Text style={styles.dropDowntextInstructions}>Specify tags
        // that Collections must include</Text>

        // </View>
      }

      <Picker
        multiple
        min={0}
        max={5}
        open={open}
        value={value}
        setOpen={setOpen}
        setValue={setValue}
        items={items}
        setItems={setItems}
        searchable
        placeholder="specify tags that Collections must include"
      />

      <View>
        <Text style={styles.switchTextInstructions}>Collection must be</Text>

        <View style={styles.switchRow}>
          <View style={styles.setChipWidth} />
          <View style={styles.currentPadding}>
            <Chip
              style={[styles.button, (urgent || current) ? styles.selected : null]}
              disabled={(notCurrent)}
              selected={urgent || current}
              onPress={() => currentSelection(!current)}
            >
              Current
            </Chip>
          </View>
          <View style={styles.urgentPadding}>

            <Chip
              style={[styles.button, (urgent) ? styles.selected : null]}
              disabled={(notCurrent || notUrgent)}
              selected={urgent}
              onPress={() => urgentSelection(!urgent)}
            >
              Urgent
            </Chip>
          </View>

        </View>
        <View style={styles.switchRow}>
          <View style={styles.setChipWidth} />

          <View style={styles.notCurrentPadding}>
            <Chip
              style={[styles.button, (notCurrent) ? styles.selected : null]}
              disabled={(current || urgent)}
              selected={notCurrent}
              onPress={() => setNotCurrent(!notCurrent)}
            >
              Not Current
            </Chip>
          </View>

          <View style={styles.notUrgentPadding}>
            <Chip
              style={[styles.button, (notUrgent || notCurrent) ? styles.selected : null]}
              disabled={(urgent)}
              selected={(notUrgent || notCurrent)}
              onPress={() => setNotUrgent(!notUrgent)}
            >
              Not Urgent
            </Chip>
          </View>

        </View>
      </View>

    </KeyboardAvoidingView>
    )}
      {/** <View  style = {(showSearchText)? styles.searchSummary : {display: 'none'}}>
      {showSearchText && tempSearchText}
    </View>* */}

      <View style={(showSearchText) ? styles.threeLineSummaryDiv : { display: 'none' }}>
        {showSearchText && threeLineDiv}
      </View>
      <View style={(!disableReset) ? styles.numResultsView : { display: 'none' }}>
        <Text style={styles.dash}>{ Object.size(collectionsList)}</Text>
      </View>

      <TouchableWithoutFeedback onPress={() => setOpen(false)}>

        <ScrollView
          contentContainerStyle={styles.collectionRowContainer}
          keyboardShouldPersistTaps="handled"
        >
          {Object.entries(collectionsList).map(([id, { label }]) => (
            <CollectionRow
              key={id}
              collectionId={id}
              label={label}
              navigation={navigation}
            />
          ))}

        </ScrollView>
      </TouchableWithoutFeedback>

    </SafeAreaView>
  );
}

render() {
    const {
      clearErrorMessage,
      errorMessage,
      isProcessing,
      navigation,
      title,
      theme: { colors },
    } = this.props;
    return (
      <KeyboardAvoidingView
        behavior={Platform.OS === 'ios' ? 'padding' : null}
        style={styles.container}
      >
        <ScrollView
          keyboardShouldPersistTaps="handled"
          keyboardDismissMode="on-drag"
        >
          <IconButton
            icon="chevron-left"
            color={colors.primary}
            size={30}
            accessibilityLabel="Back to sign in"
            onPress={() => navigation.goBack()}
          />
          <Logo />
          <Spacer>
            <Title style={{ alignSelf: 'center', color: colors.primary }}>
              {title}
            </Title>
          </Spacer>
          <Spacer>
            <TextInput
              label="Email"
              mode="outlined"
              dense
              value={this.state.email}
              autoCapitalize="none"
              autoCorrect={false}
              keyboardType="email-address"
              onChangeText={(email) => this.setState({ email })}
              onSubmitEditing={this.onSubmit}
              onFocus={clearErrorMessage}
              disabled={isProcessing || !!this.state.message}
            />
          </Spacer>
          <Spacer vertical={16}>
            <Button
              mode="contained"
              accessibilityLabel="Submit"
              onPress={this.onSubmit}
              loading={isProcessing}
              disabled={isProcessing || !!this.state.message}
            >
              Submit
            </Button>
          </Spacer>
        </ScrollView>
        <Snackbar
          visible={errorMessage}
          onDismiss={clearErrorMessage}
          action={{
            label: 'Dismiss',
            accessibilityLabel: 'Dismiss',
            onPress: () => {},
          }}
        >
          {errorMessage}
        </Snackbar>
        <Snackbar
          visible={this.state.message}
          onDismiss={() => navigation.goBack()}
          action={{
            label: 'Go Back',
            accessibilityLabel: 'Go Back',
            onPress: () => {},
          }}
        >
          {this.state.message}
        </Snackbar>
      </KeyboardAvoidingView>
    );
  }