react-native-paper#Appbar JavaScript Examples

render() {
    const { currentUser, signedInWith, theme } = this.props;
    let avatarUri = '';
    if (currentUser) {
      avatarUri = currentUser.provider[signedInWith].picture;
    }
    return (
      <>
        <StatusBar backgroundColor={theme.colors.primary} />
        <Appbar.Header style={styles.appbar}>
          <Appbar.Content title={this.props.title} />
          {avatarUri ? (
            <Avatar.Image
              size={30}
              source={{ uri: avatarUri }}
              style={[{ backgroundColor: theme.colors.accent }, styles.avatar]}
            />
          ) : (
            <Avatar.Icon
              size={30}
              icon="account"
              style={[{ backgroundColor: theme.colors.accent }, styles.avatar]}
            />
          )}
        </Appbar.Header>
      </>
    );
  }

function Settings(props) {
  return (
    <SettingsStack.Navigator
      mode="modal"
      headerMode="screen"
      screenOptions={{
        header: ({navigation, scene, previous}) => {
          return (
            <Appbar.Header style={{backgroundColor: 'white'}}>
              {previous && (
                <Appbar.BackAction onPress={() => navigation.goBack()} />
              )}
              <Appbar.Content title={scene.descriptor.options.title || ''} />
            </Appbar.Header>
          );
        },
      }}>
      <SettingsStack.Screen
        name="Settings"
        options={{title: 'Settings'}}
        component={SettingsScreen}
      />
    </SettingsStack.Navigator>
  );
}

export default function Header(props) {
  var {t} = useTranslation();
  var moment = useMoment();
  var theme = useSelector(i=>i.themes[i.theme]);
  var loggedIn = useSelector(i=>i.loggedIn);
  var {width} = useDimensions().window;
  let params = props.scene?.route?.params || {};
  let name = props.scene?.route?.name;
  let title;
  let subtitle;
  let clanData;
  if(name === 'AllCampWeeks') {
    title = "Camps Leaderboard";
  } else if(name === 'AllCampLeaderboard') {
    title = weekNames[params.week] + " Leaderboard";
  } else if(name === 'CampLeaderboard') {
    title = teamNames[params.team];
  } else if(name === 'DBType') {
    title = getType(params.munzee)?.name??params.munzee;
    subtitle = 'screens:'+name;
  } else if(name === 'DBCategory') {
    title = categories.find(i=>i.id==params.category)?.name;
    subtitle = 'screens:'+name;
  } else if(name.includes('Search')) {
    title = 'screens:'+name;
  } else if(name.startsWith('UserCapturesCategory')) {
    title = params.username;
    subtitle = 'screens:'+name;
    params.category_name = categories.find(i=>i.id==params.category)?.name
  } else if(name.startsWith('User')) {
    title = params.username;
    subtitle = 'screens:'+name;
  } else if(name.startsWith('ClanRequirements')) {
    title = moment({year:params.year,month:params.month-1}).format('MMMM YYYY');
    subtitle = 'screens:'+name;
  } else if(name.startsWith('Clan')) {
    title = params.clanid;
    subtitle = 'screens:'+name;
    clanData = "clan";
  } else {
    title = 'screens:'+name;
  }
  var clanName = useAPIRequest({
    clan: {
      endpoint: 'clan/v2',
      data: {clan_id:Number(title)},
      function: i=>i?.details?.name
    }
  }[clanData]||null);
  if(clanName) title = clanName;
  return <Appbar.Header
    statusBarHeight={0}
    style={{
      marginTop: props.insets.top,
      backgroundColor: theme.navigation.bg,
      paddingLeft: props.insets.left,
      paddingRight: props.insets.right,
    }}
  >
    {width<=1000&&loggedIn&&<Appbar.Action icon="menu" onPress={()=>props.navigation.toggleDrawer()} />}
    {!(props.route?.name == "Home" || props.navigation.dangerouslyGetState().index<1)&&<Appbar.BackAction
      onPress={()=>props.navigation.pop()}
    />}
    <Appbar.Content
      titleStyle={{...font()}}
      subtitleStyle={{...font()}}
      title={t(title,params)}
      subtitle={subtitle?t(subtitle,params):null}
    />
    <LoadingButton />
    <MHQTime />
    {/* <TouchableRipple onPress={()=>nav.navigate('Calendar')} style={{width:width>600?80:60,height:"100%"}}>
      <Tile header={true} theme={theme} date={now.format(width>600?'HH:mm:ss':'HH:mm')} extraText={now.format('DD/MM')} data={CalData?.[now.year()]?.[now.month()]?.[now.date()-1]??''} />
    </TouchableRipple> */}
    
    {/* <Appbar.Action icon={()=><Image style={{height:36,width:36,marginTop:-6,marginLeft:-6}} source={{uri:'https://munzee.global.ssl.fastly.net/images/avatars/ua2p5m.png'}} />} onPress={()=>{}} /> */}
  </Appbar.Header>
}

PeopleModal = ({
  people,
  handleInputChange, handleAddClick, handleRemoveClick,
  toggleModal, stylesPaper, stylesDefault
}) => (
  <>
    <Appbar.Header style={{ backgroundColor: theme.colors.accent }}>
      <Appbar.Action icon="chevron-down" onPress={toggleModal} />
      <Appbar.Content title="People Manager" subtitle="" titleStyle={{ fontSize: 20, fontWeight: 'bold' }} />
    </Appbar.Header>
    {people.map((x, i) => (
      <ScrollView
        key={`${x}_${i}`} //eslint-disable-line
        style={{ margin: 20 }}
      >
        <KeyboardAvoidingView>
          <TextInput
            label={I18n.t('peopleModal.fname')}
            placeholder={I18n.t('peopleModal.enterFname')}
            onChangeText={(text) => handleInputChange(text, i, 'firstName')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <TextInput
            label={I18n.t('peopleModal.lname')}
            placeholder={I18n.t('peopleModal.enterLname')}
            onChangeText={(text) => handleInputChange(text, i, 'lastName')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <TextInput
            label={I18n.t('peopleModal.relationship')}
            onChangeText={(text) => handleInputChange(text, i, 'relationship')}
            mode="outlined"
            theme={stylesPaper}
            style={stylesDefault.label}
          />
          <View>
            {people.length !== 1 && (
              <PaperButton
                buttonText={I18n.t('peopleModal.remove')}
                onPressEvent={() => handleRemoveClick(i)}
              />
            )}
            {people.length - 1 === i && (
              <PaperButton
                buttonText={I18n.t('peopleModal.add')}
                onPressEvent={handleAddClick}
              />
            )}
          </View>
        </KeyboardAvoidingView>
      </ScrollView>
    ))}
  </>
)

function Main(props) {
  return (
    <MainStack.Navigator
      headerMode="screen"
      screenOptions={{
        header: ({navigation, scene, previous}) => {
          const excludedScreens = ['Home', 'NdefWrite', 'CustomTransceive'];

          if (
            excludedScreens.findIndex((name) => name === scene?.route?.name) >
            -1
          ) {
            return null;
          }

          return (
            <Appbar.Header style={{backgroundColor: 'white'}}>
              {previous && (
                <Appbar.BackAction onPress={() => navigation.goBack()} />
              )}
              <Appbar.Content title={scene.descriptor.options.title || ''} />
            </Appbar.Header>
          );
        },
      }}>
      <MainStack.Screen
        name="Home"
        component={HomeScreen}
        options={{title: 'HOME'}}
      />
      <MainStack.Screen
        name="TagDetail"
        options={{title: 'TAG DETAIL'}}
        component={TagDetailScreen}
      />
      <MainStack.Screen
        name="NdefTypeList"
        component={NdefTypeListScreen}
        options={{title: 'CHOOSE NDEF TYPE'}}
      />
      <MainStack.Screen
        name="NdefWrite"
        component={NdefWriteScreen}
        options={{title: 'WRITE NDEF'}}
      />
      <MainStack.Screen
        name="ToolKit"
        component={ToolKitScreen}
        options={{title: 'NFC TOOL KIT'}}
      />
      <MainStack.Screen
        name="TagKit"
        component={TagKitScreen}
        options={{title: 'NFC TAG KIT'}}
      />
      <MainStack.Screen
        name="CustomTransceive"
        component={CustomTransceiveScreen}
        options={{title: 'CUSTOM TRANSCEIVE'}}
      />
      <MainStack.Screen
        name="SavedRecord"
        component={SavedRecordScreen}
        options={{title: 'MY SAVED RECORDS'}}
      />
    </MainStack.Navigator>
  );
}

function SaveRecordModal(props) {
  const {visible, onClose, title, onPersistRecord} = props;
  const [name, setName] = React.useState('');

  React.useEffect(() => {
    if (!visible) {
      setName('');
    }
  }, [visible]);

  return (
    <Modal visible={visible} animationType="slide">
      <Appbar.Header>
        <Appbar.Action
          icon={() => <Icon name="close" size={24} />}
          onPress={onClose}
        />
        <Appbar.Content title={title || 'SAVE RECORD'} />
      </Appbar.Header>
      <View style={[styles.wrapper, {padding: 15, backgroundColor: 'white'}]}>
        <TextInput
          value={name}
          onChangeText={setName}
          label="Name"
          mode="outlined"
          autoFocus={true}
          style={{marginBottom: 10}}
        />
        <Button
          mode="contained"
          onPress={() => {
            if (name) {
              onPersistRecord(name);
            }
          }}>
          SAVE
        </Button>
      </View>
    </Modal>
  );
}

function ScreenHeader(props) {
  const {navigation, title, getRecordPayload, savedRecord, savedRecordIdx, readOnly} =
    props;
  const [saveModalVisible, setSaveModalVisible] = React.useState(false);

  async function onPersistRecord(name, updateExist = false) {
    const payload = getRecordPayload();
    const nextList = AppContext.Actions.getStorage();
    if (updateExist && typeof savedRecordIdx === 'number') {
      nextList[savedRecordIdx] = {
        name,
        payload,
      };
    } else {
      nextList.push({
        name,
        payload,
      });
    }
    await AppContext.Actions.setStorage(nextList);
    setSaveModalVisible(false);
  }

  return (
    <>
      <Appbar.Header style={{backgroundColor: 'white'}}>
        <Appbar.BackAction onPress={() => navigation.goBack()} />
        <Appbar.Content title={title} />
        {!!getRecordPayload && !readOnly && (
          <Appbar.Action
            icon={() => <Icon name="save" size={22} />}
            onPress={() => {
              if (savedRecord && typeof savedRecordIdx === 'number') {
                Alert.alert(
                  'Confirm',
                  'Do you want to override current record?',
                  [
                    {
                      text: 'YES',
                      onPress: () => {
                        onPersistRecord(savedRecord.name, true);
                        showToast({
                          message: `"${savedRecord.name}" has been updated successfully!`,
                          type: 'success',
                        });
                      },
                    },
                    {text: 'No'},
                  ],
                );
              } else {
                setSaveModalVisible(true);
              }
            }}
          />
        )}
      </Appbar.Header>

      <SaveRecordModal
        visible={saveModalVisible}
        onClose={() => setSaveModalVisible(false)}
        onPersistRecord={onPersistRecord}
      />
    </>
  );
}

AppHeader = ({title, onPressRight, iconRight, onPressLeft, iconLeft}) => {
  return (
    <Appbar.Header
      style={{
        width: width,
        height: width * 0.14,
        display: 'flex',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
      }}>
      {iconLeft !== null ? (
        <Appbar.Action
          size={IconSize}
          icon={({color, size}) => (
            <Icon name={iconLeft} size={size} color={color} />
          )}
          onPress={onPressLeft}
        />
      ) : null}
      {title !== null ? (
        <Appbar.Content
          title={title}
          titleStyle={Styles.fontLarge}
          onPress={() => {
            if (title !== '' && iconLeft === null) {
              onPressLeft();
            }
          }}
        />
      ) : null}
      {iconRight !== null ? (
        <Appbar.Action
          size={IconSize}
          style={{
            marginLeft: 'auto',
          }}
          icon={({color, size}) => (
            <Icon name={iconRight} size={size} color={color} />
          )}
          onPress={onPressRight}
        />
      ) : null}
    </Appbar.Header>
  );
}

HouseholdManager = (props) => {
  const {
    formikProps, formikKey, surveyingOrganization, values
  } = props;
  const {
    setFieldValue, handleBlur, handleChange, errors
  } = formikProps;
  const [relationships] = useState([
    'Parent', 'Sibling', 'Grand-Parent', 'Cousin', 'Other'
  ]);
  const [relationship, setRelationship] = useState('');
  const [selectPerson, setSelectPerson] = useState();
  const [modalView, setModalView] = useState('unset');
  const [householdSet, setHouseholdSet] = useState(false);

  const onSubmit = () => {
    if (!selectPerson) {
      alert('You must search and select an individual.') //eslint-disable-line
    } else if (relationship === '') {
      alert('You must select a role/relationship in the household.') //eslint-disable-line
    } else {
      setModalView('third');
      attachToExistingHousehold();
      postHouseholdRelation();
    }
  };

  const attachToExistingHousehold = () => {
    // set householdId (from selectPerson) on the residentIdForm
    setFieldValue(formikKey, selectPerson.householdId || 'No Household Id Found');
  };

  const postHouseholdRelation = () => {
    let finalRelationship = relationship;
    if (relationship === 'Other') {
      finalRelationship += `__${values.other}`;
    }
    const postParams = {
      parseParentClassID: selectPerson.householdId,
      parseParentClass: 'Household',
      parseClass: 'Household',
      localObject: {
        relationship: finalRelationship,
        latitude: 0,
        longitude: 0
      }
    };
    postHouseholdWithRelation(postParams).then((id) => {
      setFieldValue(formikKey, id);
    });
  };

  const createNewHousehold = () => {
    // create new householdId and attach on the residentIdForm
    const postParams = {
      parseClass: 'Household',
      localObject: {
        latitude: 0,
        longitude: 0
      }
    };
    postHousehold(postParams).then((id) => {
      setFieldValue(formikKey, id);
    });
    setHouseholdSet(true);
  };

  return (
    <View style={layout.formContainer}>
      {modalView !== 'second' && modalView !== 'third'
        && (
          <View>
            {!householdSet && modalView !== 'zero' && (
              <RadioButton.Group
                onValueChange={(value) => { setModalView(value); }}
                value={modalView}
              >
                <RadioButton.Item label={I18n.t('householdManager.doNothing')} value="zero" />
                <RadioButton.Item label={I18n.t('householdManager.createHousehold')} value="first" />
                {modalView === 'first'
                  && <Button style={layout.buttonGroupButtonStyle} icon="plus" mode="contained" onPress={createNewHousehold}>{I18n.t('householdManager.household')}</Button>}
                <RadioButton.Item label={I18n.t('householdManager.linkIndividual')} value="second" />
              </RadioButton.Group>
            )}
            {householdSet && modalView === 'first'
              && <Text>{I18n.t('householdManager.successCreateHousehold')}</Text>}
            {modalView === 'zero' && (
              <View>
                <Text>{I18n.t('householdManager.noHousehold')}</Text>
                <Button style={{ marginTop: 10 }} onPress={() => setModalView('')}>{I18n.t('householdManager.addCreateHousehold')}</Button>
              </View>
            )}
          </View>
        )}

      {modalView === 'second' && (
        <Modal
          animationType="slide"
          visible
        >
          <Appbar.Header style={{ backgroundColor: theme.colors.accent }}>
            <Appbar.BackAction onPress={() => setModalView('first')} />
            <Appbar.Content title={I18n.t('householdManager.householdManager')} subtitle="" titleStyle={{ fontSize: 20, fontWeight: 'bold' }} />
          </Appbar.Header>

          <View style={styles.container}>
            <ResidentIdSearchbar
              surveyee={selectPerson}
              setSurveyee={setSelectPerson}
              surveyingOrganization={surveyingOrganization}
            />
            {!selectPerson && (
              <Text style={{ fontWeight: 'bold', padding: 10 }}>{I18n.t('householdManager.useSearchBar')}</Text>
            )}
            {selectPerson && (
              <Text>{I18n.t('householdManager.relationshipHousehold')}</Text>
            )}
            <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
              {selectPerson && relationships.map((result) => (
                <View key={result} style={layout.buttonGroupButtonStyle}>
                  {relationship === result ? (
                    <Button mode="contained">{result}</Button>
                  ) : (
                    <Button mode="outlined" onPress={() => setRelationship(result)}>{result}</Button>
                  )}
                </View>
              ))}
            </View>
            {relationship === 'Other' && (
              <View style={styles}>
                <TextInput
                  label="Other"
                  onChangeText={handleChange('other')}
                  onBlur={handleBlur('other')}
                  mode="outlined"
                  theme={{ colors: { placeholder: theme.colors.primary }, text: 'black' }}
                />
                <Text style={{ color: 'red' }}>
                  {errors.other}
                </Text>
              </View>
            )}
            {selectPerson ? (
              <Button style={{ marginTop: 10 }} theme={{ backgroundColor: theme.colors.primary }} mode="contained" onPress={onSubmit}>
                {I18n.t('global.submit')}
              </Button>
            ) : (
              <Button theme={{ backgroundColor: theme.colors.primary }} mode="contained" onPress={onSubmit} disabled>
                {I18n.t('global.submit')}
              </Button>
            )}

          </View>
        </Modal>
      )}
      {modalView === 'third' && (
        <View>
          <RadioButton.Group onValueChange={(value) => setModalView(value)} value={modalView}>
            <RadioButton.Item label={I18n.t('householdManager.linked')} value="third" />
          </RadioButton.Group>
        </View>
      )}
    </View>
  );
}

Home = () => {
  const {
    colors: { background, surface },
  } = useTheme();
  const [openSelector, setOpenSelector] = useState(false);
  const [selected, setSelected] = useState("standard");
  const [insetBottom, setInsetBottom] = useState(0);
  const insets = useSafeAreaInsets();
  const options = [
    { label: "Standard List", value: "standard" },
    { label: "Columns List", value: "columns" },
    { label: "Sections List", value: "sections" },
    { label: "Multiselect List", value: "multiselect" },
    { label: "Compare List", value: "compare" },
  ];
  const selectedOption = options.find((item) => item.value === selected);
  return (
    <View
      style={[
        styles.container,
        {
          backgroundColor: background,
          paddingBottom: insetBottom + insets.bottom + 64,
        },
      ]}
    >
      <Appbar.Header style={[styles.header, { height: 75 }]}>
        <Appbar.Content title="BigList Example" subtitle="10.000 items" />
      </Appbar.Header>
      <TouchableOpacity
        style={[
          styles.containerBottom,
          { backgroundColor: surface, bottom: insets.bottom },
        ]}
        onPress={() => setOpenSelector(!openSelector)}
        onLayout={(event) => {
          setInsetBottom(event.height || 0);
        }}
      >
        <TextInput
          label="View mode"
          editable={false}
          onTouchStart={() => setOpenSelector(true)}
          value={selectedOption.label}
          right={
            <TextInput.Icon
              name="chevron-down"
              onPress={() => setOpenSelector(!openSelector)}
            />
          }
        />
      </TouchableOpacity>
      {selected === "standard" ? (
        <List />
      ) : selected === "columns" ? (
        <ColumnsList />
      ) : selected === "sections" ? (
        <SectionList />
      ) : selected === "multiselect" ? (
        <MultiSelectList />
      ) : selected === "compare" ? (
        <CompareList />
      ) : null}

      {openSelector && (
        <View
          style={[
            StyleSheet.absoluteFill,
            { flex: 1, backgroundColor: surface },
          ]}
        >
          <Appbar.Header style={[styles.header, { height: 75 }]}>
            <Appbar.Content
              title="View mode"
              subtitle="Select the list view mode example..."
            />
          </Appbar.Header>
          <SelectList
            data={options}
            value={selected}
            onSelect={(value) => {
              setSelected(value);
              setOpenSelector(false);
            }}
          />
        </View>
      )}
    </View>
  );
}

export default function SectionList() {
  const renderItem = ({ item }) => {
    return (
      <List.Item
        title={item.title}
        description={item.description}
        style={styles.container}
        left={(props) => <List.Icon {...props} icon="account" />}
      />
    );
  };
  const renderEmpty = () => <List.Item title="No items" />;
  const renderHeader = () => (
    <List.Item
      title="Marco Cesarato"
      description="[email protected]"
      style={styles.container}
      left={(props) => <List.Icon {...props} icon="account" />}
    />
  );
  const renderFooter = () => (
    <Block>
      <Subheading>No more items available...</Subheading>
    </Block>
  );
  const renderSectionHeader = (section) => (
    <Appbar style={styles.header}>
      <Appbar.Content
        style={styles.headerContent}
        title={"Section " + (section + 1)}
        subtitle="Below are listed all section items"
      />
    </Appbar>
  );
  const renderSectionFooter = (section) => (
    <Block>
      <Subheading>Footer Section {section}</Subheading>
    </Block>
  );
  return (
    <SafeAreaView style={styles.container}>
      <KeyboardAvoidingView style={styles.container}>
        <BigList
          style={styles.container}
          sections={sections}
          // Item
          itemHeight={90}
          renderItem={renderItem}
          renderEmpty={renderEmpty}
          // Header
          headerHeight={90}
          renderHeader={renderHeader}
          // Footer
          footerHeight={100}
          renderFooter={renderFooter}
          // Section
          sectionHeaderHeight={75}
          renderSectionHeader={renderSectionHeader}
          // Section footer
          sectionFooterHeight={60}
          renderSectionFooter={renderSectionFooter}
        />
        <StatusBar style="auto" />
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}