I try to add shoutem to other app but when i work with NaviagtionBar and #shoutem/animation i got issue like picture below here:
this i got when using props style NavigationBar 'inline',
and here is my code:
<NavigationBar
styleName="inline"
animationName="solidify"
title={restaurant.name}
share={{
title: restaurant.name,
link: restaurant.url,
}}
/>
but i dont want like that. I want props style is 'clear' for make tranparent navigationbar when start app, i still want show it when scroll down like this:
but when i change props style of NavigationBar to 'clear' i got this issue(when scroll down, NavigationBar still not show up):
Anyone can help me to resolve it?
Related
I'm using the React Native Base Button.
The fontSize prop doesn't seem to work at all, it doesn't do anything. Am I doing something wrong, or misunderstanding the prop?
I did install the library using --legacy-peer-deps, because it doesn't offically support React 18 yet, but it seems to be working fine outside of this.
It appears you can pass props to the underlying Text in the Button with the _text prop:
<Button _text={{fontSize: "2xl"}}>
Press Me
</Button>
You are trying to increase Button's font size that is why it is not working. Think about that you try to increase TouchableOpacity's font size.
Here is a possible Solution
<Button>
<Text style={{fontSize:16}} >Button Title</Text>
</Button>
I have coded swiper button and navigation insider the swiper container but the buttons and the bullets are showing in the wrong place(at the top of the page).... I would like them to show inside the swiper container...
I also faced the same issue when I used Swiper.
Try to use this
::ng-deep .swiper-pagination { `bottom: 10px;`}
You can modify it like you want by using some id or class for swiper.
<swiper class="bulletsAtBottom">some code...<swiper>
.bulletsAtbottom {bottom:10px;}
How can I remove default toolbar and add a custom toolbar as per my requirements and not get the default Save button with Floppy Disk in SimpleForm?
I am able to style the buttons and remove the icons on the toolbar but not able to proceed further as I am new to react-admin.
As mentioned in the documentation : React-Admin Toolbar, you can always override the default layout of the toolbar with toolbar={<CustomToolbarComponent />} props in the SimpleForm component.
As for disabling the toolbar altogether, you can use toolbar={false} in SimpleForm and that would remove it.
You can also let toolbar be false, and maybe add the CustomToolbarComponent inside the SimpleForm component.
Something like :
<SimpleForm toolbar={false}>
<FormComponent1 />
<FormComponent2 />
<CustomToolbarComponent />
</SimpleForm>
As someone who was new to react-admin a few weeks ago too, please read the documentation thouroughly and their code and play with it, you'll come across the solution.
I'm having trouble force focussing a react native TextInput field.
It's focused when the page loads with autofocus={true}.
But after blurring I would need to press the text input field, but that's hidden because of design reasons. Is there a way to document.getElementById("myText").focus(); in react native that I can call after onBlur()?
Cheers.
You need to assign the TextInput field to a ref like this:
<TextInput ref={ref => (this.ref = ref)} />
Then you can programmatically focus it by running focus() on it, like so:
this.ref.focus();
Here's a little Snack where I run the focus/blur function when pressing a button:
https://snack.expo.io/#marcelkalveram/auto-focus-input-field-using-ref
It should be easy to replicate this for your navigation scenario.
In case you're using react-navigation, this is the part of the docs you'll be interested in: https://reactnavigation.org/docs/en/navigation-prop.html#addlistener-subscribe-to-updates-to-navigation-lifecycle
I can't t seem to find any complete examples for creating your own navBar component and then wiring it up to react-native-router-flux. Can anyone help me out? Looking at the github issues it seems like this is a big need for the library. What I'm looking to do is:
Create a new component with a left button and an image to the right.
Have the button icon change depending on the scene, but use the same image to the right.
Wire it to react-native-router-flux so that the navBar displays properly and keeps track of the users position in the same way that the default navBar does.
Thanks!
This a similar problem I faced. No tutorials online that tell you how to use custom navbar. I have found a way that works for me. Try this:
<Router navBar = {MainNavBar}>
<Scene key = "home" component = {HomeScreenContainer} title = "Home" initial = {true} />
</Router>
This is the code for main Root component where you define scene. You have to pass the Nav bar component in router or in any scene where you want your navbar.
And your Navbar will be something like this:
<NavigationBar
leftComponent = {<TouchableOpacity><Icon name="sidebar" /></TouchableOpacity>}
centerComponent = {<Title>{props.title}</Title>}
/>
Hope this helps :)