I'm using a Native-Base Drawer component, and I'm setting the openDrawerOffset value myself to be 300 wide (see code below). My main problem is tapToClose is acting as if the drawer is the default width and only responding to a tap within the last 15% of the screen or so.
Is this a bug in native-base? And is there a workaround?
My code is below:
<Drawer
tapToClose={true}
openDrawerOffset={1 - (300 / Dimensions.get('window').width)} // this has to be 300 wide
initializeOpen={true}
ref={(ref) => { this.drawer = ref; }} // not really using this anymore
content={
<SideBarView navigator={this.navigator} closeDrawer={this.closeDrawer.bind(this)} />
}
onClose={() => this.closeDrawer()} >
<MainViewTitlebar
title={this.props.title}
openDrawer={this.openDrawer.bind(this)}
navigation={this.props.navigation}>
</MainViewTitlebar>
<View style={styles.content}>
{this.renderMainView()}
</View>
</Drawer>
You could set the panCloseMask prop same as openDrawerOffset to achieve that.
Related
I am trying to achieve pagination for infinite scrolling in react native. When loading, I want to render the loading spinner at the bottom of the Flat list component. (Note: I'm using Expo for this app)
const renderFooter = () => {
if (!category.loading) return null;
return (
<View style={spinnerStyles.container}>
<ActivityIndicator animating size="large" color="#0000ff" />
</View>
);
};
return (
<View style={styles.container}>
<FlatList
columnWrapperStyle={{ justifyContent: "space-between" }}
numColumns={2}
data={category.data}
renderItem={categoryItem}
keyExtractor={(item) => item._id + item.sub_category}
onEndReachedThreshold={0}
listFooterComponent={renderFooter}
onEndReached={() => loadMore()}
/>
</View>
);
The loading spinner not correctly working with the flat list footer.
Has anyone run into this issue before, or does anyone have a solution?
Sorry, it's my simple syntax error. It's actually ListFooterComponent not listFooterComponent. Now it's working fine, Thank you.
Instead of calling the refrence, call the function. It should look something like this.
ListFooterComponent={renderFooter()}
I have a animated view stack which contains a Pressable component to navigate to another screen. But when I press the button, navigation happens after the animation of the container. I want to make it instant.
<Animated.View>
<Animated.View style={[styles.headerContainer, titleStyle]}>
<Animated.Text style={styles.verificationTitle}>
{activationBoxTitle}
</Animated.Text>
<ArrowRightWhite />
</Animated.View>
<Animated.View style={[styles.container, descriptionContainerStyle]}>
<ImageBackground
style={styles.backgroundImage}
resizeMode="cover"
source={images.activateAccBackground}
>
<Pressable
onPress={() => navigation.navigate(
"GeneralQuestions", {
screen: navigateActivationToPage
})}
>
<Animated.Text style={descriptionStyle}>
{activationBoxDescription}
</Animated.Text>
</Pressable>
</ImageBackground>
</Animated.View>
</Animated.View>
How can I do that?
I've seen a problem like this in a question here and I've also seen it in a project. The most common is before navigation, add a setTimeOut, this will cause a delay and have the animation and navigation. It would look something like this:
function handleNavigate() {
setTimeout(() => {
navigation.navigate('GeneralQuestions', {
screen: navigateActivationToPage,
});
}, 5000);
}
// ...
<Pressable
onPress={() => handleNavigate}
/>
Then at setTimeOut time, you add a value that makes sense according to your animation
I am new to react native. I have created a form. in which I am rendering some buttons according to server response. Now I want to set opacity of button 50% means. I want that button should look like its a disabled Now. SO is it possible if yes then please help. thanks. I want to set that opacity in my 1st line of code
here is my code
{data.bank_account_details_data[0] != null && (
<TouchableOpacity>
<Card center middle shadow style={styles.category} >
OTHER INFORMATION
</Text>
</Card>
</TouchableOpacity>
)}
You can set the opacity of the TouchableOpacity with a ternary expression (like your first line) based on a condition within the style prop.
Simplified example:
export default function App() {
const [hasOpacity, setHasOpacity] = React.useState(false)
return (
<View style={styles.container}>
<TouchableOpacity onPress={() => {
setHasOpacity(!hasOpacity)
}}
activeOpacity={0.2}
style={{opacity: hasOpacity ? 0.5 : 1.0}}
>
<Text>Test</Text></TouchableOpacity>
</View>
);
}
https://snack.expo.io/a1Y-TU4XB
In your example, it might look like this:
<TouchableOpacity
activeOpacity={0.2}
style={{opacity: data.bank_account_details_data[0] != null ? 0.5 : 1.0}}
>
you can use something like this
<TouchableOpacity
// opacity value ranges from 0 to 1
activeOpacity={0.9} //opacity for on touch behaviour
style={{opacity:0.9}} // opacity for view behaviour
onPress={()=>{
console.log("i am here")
}}>
<Text style={{color:"#FFF"}}>This is opacity check</Text>
</TouchableOpacity>
instead of static value of opacity you can use state, props or value from backend as a variable as well
Is there any way to create something like a ScrollView with dynamic height?
Details on what we're trying to do:
We created a Top Tab Bar (using createMaterialTopTabNavigator) within a ScrollView. Everything works fine, except the height of the ScrollView. Let's assume there are 3 tab screens with different heights: TabScreen1: 800, TabScreen2: 400, TabScreen3: 300... At rendering, the ScrollView takes the greatest height, and when Tab2 or 3 is selected, the height of our ScrollView remains at 800, so there is empty space for scrolling in Tab2 and 3.
As I promised, here is how we solved it.
In your class where you have your ScrollView you need a state like
const [activeTab, setActiveTab] = useState('tab1') //your default (first) tab
Later, you want to change that state every time you change tab:
<TabsStack.Screen
name={'tab1'}
component={
activeTab === 'tab1' ? Tab1Screen : DefaultScreen
}
listeners={{ focus: () => setActiveTab('tab1') }}
/>
Now every time a tab is unselected or rather not focused it will show DefaultScreen which is an empty view and has no height like:
const DefaultScreen = () => (
<Box
flex={1}
py={20}
alignItems="center"
justifyContent="center"
bg="background"
>
<ActivityIndicator size="large" color="white" animating />
</Box>
)
In my case (see question above), every time I switch from Tab1.1.1 to Tab1.1.2, Tab1.1.1 will change to DefaultScreen
Try something like this,
Fix the height of the parent widget to the maximum screen height you want that Tab Navigator to have.
<ListView or ScrollView>
<View style={{height: (width)/(0.8)}} >
<Tab.Navigator tabBar={(props) => <TabBar {...props} />}>
<Tab.Screen name="T1" component={T1} />
<Tab.Screen name="T2" component={T2} />
<Tab.Screen name="T3" component={T3} />
</Tab.Navigator>
</View>
</ ListView or ScrollView>
And for tabs do Something like this
T1 ->
<View style={styles.container}>
<ScrollView nestedScrollEnabled={true}>
<FlatList
numColumns={3}
data={allMedia}
keyExtractor={(item) => item.id}
listKey={(post) => `${post.id}D`}
renderItem={({ item }) => (Anything)}
scrollEnabled ={false}
/>
</ScrollView>
</View>
Remember to disable the scroll view Inside the FlatList of tabs and wrap with a ScrollView with nestedScrollEnabled={true}
Use this contentContainerStyle={{flex: 1}} inside scroll view
<ScrollView contentContainerStyle={{flex: 1}}>
...
// your tab
</ScrollView>
There is no need to put TabNavigator inside ScrollView. Put ScrollView inside of each TabScreen instead
Answering your question: if your ScrollView is the same height as the content then it doesn't scroll. You are probably talking about height of a contentContainer of a ScrollView. And the only wayto set it dynamically is to use onLayout to measure content height of currently selected tab, save this number to state and apply it as a height of in contentContainerStyle prop of a ScrollView. I don't recommend hacking it this way unless absolutely necessary though
I’m working on a React Native screen. It has two tabs. Let's just call it Tab 1 and Tab 2
Each tab will show a Flatlist with data specific to the tab.
I control the showing or hiding of each Flatlist.
Here's the weird behavior:
When the screen loads, Tab 1 is the default that shows.
Scroll Flatlist 1
Tap on Tab 2, Flatlist 2 shows
Tap on Tab 1, the scroll position is back to the beginning of the list!
After this initial weird behavior, any subsequent scrolling in either tab's flatlist MAINTAINS the scroll position of where you left it.
What can I do to fix this?
Here's the return from my render():
// Need to have two different components (and show/hide them accordingtly)
// so that they each maintain their own scroll position, etc.
const youActivityStyle = activityTabIndex === 0 ? { display: 'flex' } : {display: 'none'}
const followingActivityStyle = activityTabIndex === 0 ? { display: 'none'} : {display: 'flex' }
return (
<React.Fragment>
<View style={youActivityStyle}>
<FlatList
data={activityDataMe}
renderItem={this.renderItem}
keyExtractor={this.activityKeyExtractor}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
contentContainerStyle={styles.flatListContentContainerStyle}
onRefresh={this.onRefresh}
refreshing={activityRefreshing}
onEndReached={this.flatListOnEndReached}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={this.flatListOnMomentumScrollBegin} />
</View>
<View style={followingActivityStyle}>
<FlatList
data={activityDataFollowing}
renderItem={this.renderItem}
keyExtractor={this.activityKeyExtractor}
ListHeaderComponent={this.renderHeader}
ListFooterComponent={this.renderFooter}
contentContainerStyle={styles.flatListContentContainerStyle}
onRefresh={this.onRefresh}
refreshing={activityRefreshing}
onEndReached={this.flatListOnEndReached}
onEndReachedThreshold={0.5}
onMomentumScrollBegin={this.flatListOnMomentumScrollBegin} />
</View>
</React.Fragment>
)