"react-native-navigation": "^7.17.1",
Swipe back area is very small and hard to trigger. How can I increase swipe back area?
And can I use pop gesture on Android?
You can change the navigation options in StackNavigator. Maybe in your index.js
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="component_name"
component={COMPONENT}
options={{
gestureResponseDistance: {horizontal: VALUE}, // change VALUE here
}}
/>
</Stack.Navigator>
</NavigationContainer>
Related
I'm creating a sign in screen and a create account screen on my application. I have buttons that go back and forth to each other. Both screens work fine individually. When I do this, there can often be a visual error like so:
My App.js Code:
const App = () => {
return (
<NavigationContainer theme={theme}>
<Stack.Navigator screenOptions={{ headerShown: false}} initialRouteName="CreateAccountScreen">
<Stack.Screen name ="CreateAccountScreen" component={CreateAccountScreen} />
<Stack.Screen name ="SignInScreen" component={ SignInScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
Code from each Screens button that goes back and forth:
onSignUpButtonPressed = () => {
navigation.navigate("SignInScreen")
}
onCreateAccountButtonPressed = () => {
navigation.navigate("CreateAccountScreen")
}
Displays seem to overlay themselves in a bad way
I've tried a bunch of things and this has happened on several screens...
Your initialRouteName is set up as we can see but on your Stack.Screen you also give it the Component attribute.
I did a test based on how my navigation looks and I did not get the visual bug you showed so I think if you removed the component attribute and maybe just put the component tag inside your Stack.Screen as shown below it might work. Just imagine my Home is your CreateAccountScreen.
<Stack.Navigator
initialRouteName='Home'
>
<Stack.Screen
name="Home"
options={{
headerShown: false,
}}
>
{props => <Home {...props} username='Bella' />}
</Stack.Screen>
You also dont have the code in your question to define Stack like this:
const Stack = createStackNavigator();
when i click the have password visible functional eye icon in the textInput component, keyboard is gone. I want to keep the keyboard visible and use this function, but I don't know what to do.
<TextInput
name="password"
label="Enter Your Password"
mode="outlined"
style={styles.textInput}
autoCapitalize={'none'}
onChangeText={text => setPassword(text)}
secureTextEntry={passwordVisibility}
value={password}
right={<TextInput.Icon icon={passwordVisibility ? "eye" : "eye-off"}
onPressIn={() => {
passwordVisibility ? setPasswordVisibility(false) : setPasswordVisibility(true)
}} />}
returnKeyType='next'
/>
enter image description here
I am working with #react-navigation/native 6 and using the headerLargeTitle option.
Depending on the screen size the padding of the title is changing. I could not find solution to adjust this through the documented APIs.
Any idea?
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const PortfolioStack = createNativeStackNavigator();
const PortfolioStackScreens = (): JSX.Element => {
return (
<PortfolioStack.Navigator>
<PortfolioStack.Screen
name="Portfolio"
component={PortfolioScreen}
options={{
headerLargeTitle: true,
headerShadowVisible: false,
headerLargeTitleShadowVisible: false,
}}
/>
</PortfolioStack.Navigator>
);
};
Thank you
Whether to enable header with large title which collapses to regular header on scroll.
For large title to collapse on scroll, the content of the screen should be wrapped in a scrollable view such as ScrollView or FlatList. If the scrollable area doesn't fill the screen, the large title won't collapse on scroll. You also need to specify contentInsetAdjustmentBehavior="automatic" in your ScrollView, FlatList etc.
Only supported on iOS.
Detail
I'm using the react-virtualized ScrollSync component to sync the scrolling of a couple fixed headers — very similar to the example in the docs.
My question: is it possible to provide an initial scrollTop value to ScrollSync (or its children)? I realize that the better way to do this would be through use of scrollToRow on the Grid component that controls the scroll position — for what it's worth, I am using scrollToColumn for this purpose. But because, vertically, I'm only rendering one very tall cell, scrollToRow doesn't provide the fidelity needed.
I do realize that this is a slightly bastardized use of a grid component, but it all works quite nicely as a horizontal, infinitely loading scroller, while allowing me to re-use an existing component. If I could just set an initial scrollTop, I'd be golden.
Thanks.
Unfortunately this is not currently supported without a bit of a hack.
First, the reason for the hack: Scroll offsets flow in one direction with ScrollSync (main Grid to synchronized Grids). This means that even if ScrollSync accepted default left/top offsets as props- they would get overridden by the first render of the main Grid. I think this is probably the right thing to do to avoid ugliness inside of react-virtualized.
However you could work around it in application code like this if you wanted to:
class YourComponent extends Component {
render () {
// These are arbitrary
const defaultScrollLeft = 300
const defaultScrollTop = 500
return (
<ScrollSync>
{({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => {
if (!this._initialized) {
scrollLeft = defaultScrollLeft
scrollTop = defaultScrollTop
this._initialized = true
}
return (
<div>
<Grid
{...otherSyncedGridProps}
scrollLeft={scrollLeft}
/>
<Grid
{...otherMainGridProps}
onScroll={onScroll}
scrollLeft={defaultScrollLeft}
scrollTop={defaultScrollTop}
/>
</div>
)
}}
</ScrollSync>
)
}
}
I have a menu-button that I want to remove the drop-shadow from. I would like to not have to instantiate a menu object first (since it requires me to specify a div in the DOM to attach it to). I am able to instantiate a menu in the JS, but when I try to remove the drop shadow via: this.menuButton.getMenu().cfg.setProperty('shadow', false); the drop shadow still appears. I checked the cfg object in the JS debugger and shadow is set to false, but the shadow still appears.
Another option would be to remove the shadow div from the dom, but that doesn't seem like the right thing to do.
I did eventually create a div in my DOM to hold my menu. I was wary at first because my layout is not very robust (we outsourced to a graphic designer and have been trying to integrate his work with our code); this was why I didn't want to introduce a div into the DOM.
The key for me was to include the div in a place where it wouldn't affect the layout. Originally I had something that looked like this:
<input> type="button" id="srchType" />
<input type="text" id="first-name" value="First Name" />
<input type="submit" id="profiles-search-submit" value="Search" />
I inserted the div between two of the inputs; this screwed up my layout. The key was to insert the div before or after; this wouldn't screw up my layout. YMMV, depending on how sensitive your DOM is to changes; I hope this helps someone out if they're wondering what they should do.
After you do this (create your div) you can create a YUI Menu object like so:
var searchMenuItems =
[{ text: "First Name", value: 'firstName', onclick: {fn: onMenuItemClick}},
{ text: "Last Name", value: 'lastName', onclick: {fn: onMenuItemClick}}];
var srchTypeMenuConfig = { shadow: false,
effect: {
effect: YAHOO.widget.ContainerEffect.FADE,
duration: .25
}
};
this.srchTypeMenu = new YAHOO.widget.Menu(this.searchMenuEl,
srchTypeMenuConfig);