Segmented Control In Header

92
January 24, 2022, at 07:30 AM

im trying to add a segmented tab to my header let me show you an example before i start.

if you've been on the twitter app you know you can swipe through these tabs while these tabs remain on the header, i cant quite find out how i would complete this tho

Some of the code:

 <Stack.Screen name="Find" component={Home} options={{
            header: () => (
                <View style={{ backgroundColor: 'black', paddingBottom: 10 }}>
                    <View style={{ paddingLeft: 10, flexDirection: 'row', paddingTop: 25, backgroundColor: 'black' }}>
                        <View style={{}}>
                            <View style={{ paddingRight: 10, flexDirection: 'row', alignItems: 'center' }}>
                                <View>
                                    <Image style={{ width: 30, height: 30, borderRadius: 30 }} source={require('../assets/forever.png'} />
                                </View>
                                <View style={{ width: '84%', paddingHorizontal: 10 }}>
                                    <Formik
                                        initialValues={{ formData: "" }}
                                        onSubmit={async (values, { setSubmitting }) => {
                                            setSubmitting(true)
                                            await setData({
                                                values
                                            })
                                            console.log(sdata)
                                            setSubmitting(false)
                                        }}
                                    >
                                        {({ handleChange, handleBlur, handleSubmit, values }) => (
                                            <>
                                                <View
                                                    style={{
                                                        backgroundColor: '#0D0D0D',
                                                        padding: 10,
                                                        borderRadius: 18,
                                                        flexDirection: 'row',
                                                        height: 34
                                                    }}
                                                >
                                                    <View style={{ alignItems: 'center' }}>
                                                        <Icon name="search" type="ionicon" size={15} color="grey" />
                                                    </View>
                                                    <TextInput
                                                        autoCorrect={false}
                                                        clearButtonMode="always"
                                                        placeholderTextColor="grey"
                                                        onChangeText={handleChange('formData.form')}
                                                        value={values.formData.form}
                                                        onBlur={handleBlur('formData')}
                                                        placeholder="Search"
                                                        style={{ backgroundColor: '#0D0D0D', paddingHorizontal: 20 }}
                                                    />
                                                </View>
                                            </>
                                        )}
                                    </Formik>

                                </View>
                                <View style={{ flexDirection: 'row' }}>
                                    <Icon onPress={() => create.current.show()} type="ionicon" size={28} color="white" name="create-outline" />
                                </View>
                            </View>
                        </View>
                    </View>
                    <ScrollableTabView style={{}} renderTabBar={() =>
          <DefaultTabBar
            style={{
              borderWidth: 0,
            }}
          />
        } tabBarUnderlineStyle={{ backgroundColor: "#fff", borderWidth: 1}} tabBarTextStyle={{ color: "#fff" }} tabBarBackgroundColor="#000">
          <View tabLabel="Home">
          </View>
          <Quotes tabLabel="Quotes" />
          <View tabLabel="Posts" >
          </View>
          <View tabLabel="Home" >
          </View>
         
        </ScrollableTabView>
                </View>
            ),
        }} />

If you need anymore information, just comment and thanks in addvanced

READ ALSO
How to use jQuery.Lazy() Plugin with hash Image Tag Helper asp-append-version (in asp.net core)

How to use jQuery.Lazy() Plugin with hash Image Tag Helper asp-append-version (in asp.net core)

I am having a problem configuring jQueryLazy() to work with images that have been appended with a hash

96
How to convert PHP preg_replace_callback to C#?

How to convert PHP preg_replace_callback to C#?

I have such a code in PHP, but I need to rewrite it in C#Suggest any options please

87
Chaincode Installation error in Hyperledger Fabric 2.2

Chaincode Installation error in Hyperledger Fabric 2.2

~/go/src/githubcom/hyperledger/fabric-samples/test-network$ peer lifecycle chaincode install simple_chaincode

72