Comments (31)
Hi,
I think providing a concrete example, or a "full app" working with react-native-router-flux & NativeBase could be great for this project! This will make easier to new people to jump in.
from nativebase.
@vinaydate @Crash-- The boilerplate with NativeBase, Redux is live.
Native-Starter-Kit
from nativebase.
Yes, that is actually on our to-do list. A full boilerplate app with native-base, react-native-router-flux and redux
from nativebase.
I don't understand how this uses react-native-router-flux
? I don't see it anywhere in that example.
from nativebase.
The component should be nested inside the component.
from nativebase.
Yes, we are infact using that router for one of our projects. What we are doing is, we have a Router component at the root of our project. We define the scenes/routes in our router and for that, we don't need the Container component. We only use the container where we define our views, not the routes.
from nativebase.
@tarr11 Did you ever find a way to use RNRF with nativebase, and handle the header nicely?
Thanks
from nativebase.
Simple application at https://github.com/vijaychouhan-rails/AllInOne
from nativebase.
I'm waiting to switch to the new official navigation system once it is released, but in the mean time I am wrapping my scenes in a container, and then adding sceneStyle={{ paddingTop: ... }} to my Router, with different values for android and iOS.
So each of my scenes looks like:
<Container>
<Content>
...
</Content>
<Footer>
...
</Footer>
</Container>
As far as I can tell it works nicely, but I haven't tried it with too many devices, just my iPhone 7 Plus.
from nativebase.
For anyone who came here like me looking for an example of RNRF using Native-Base with custom tabs feel free to check out the hack I used for my wedding app here: https://github.com/Ariflo/aandr_wedding
The trick is passing a custom component to the tabBarComponent
attribute:
https://github.com/Ariflo/aandr_wedding/blob/master/app/mobile/views.js#L23
Then using native-base to build that custom component:
https://github.com/Ariflo/aandr_wedding/blob/master/app/mobile/components/Footer.js#L4
To get here I found this article to be immensely helpful: https://medium.com/@sportnak/adding-custom-tabbed-navigation-in-react-native-router-flux-e08429c22cce
from nativebase.
which component should be nested inside which component?
from nativebase.
are you familiar with the react-native-router-flux component?
from nativebase.
Till your boilerplate app goes online, may I know, whether the <Container>
should be parent of <Provider>
(which in turn contains <RouterWithRedux>
) or the other way round? Obviously, I can try out this, but I want theoretical point of view.
from nativebase.
@tarr11 The reason you didn't find implementation of react-native-router-flux
in Native-Starter-Kit is that, NSK has been updated with RN Navigator.
Also NativeBase has nothing to do with react-native-router-flux
. So that must be simple and straight forward.
from nativebase.
@tarr11 AFAIK, you can define all your views in one place using rnrf
. There shouldn't be any change in implementation since native-base
only provides UI components and requires no architectural changes to your app.
Also we've decided not to use rnrf
in our app abd use the RN Navigator instead.
@vinaydate Container
should ideally be the wrapper to your view components and so <Provider>
should be the parent component.
from nativebase.
@SupriyaKalghatgi Thanks. I was trying to use RNRF with native base but the UI conflicted because RNRF takes over the "Header".
from nativebase.
@tarr11 @ccdwyer Hey guys did you find a way to use native base and RNRF with the RNRF header ?
from nativebase.
@ccdwyer awesome .. thank you for your answer gonna try it, I'll let you know :)
from nativebase.
@ccdwyer i have a small question, i am new to react native so in this case how does your router look like?
in my case its not working with:
//file appcontiner.js
const scenes = Actions.create(
<Scene key="root" tabs={false} >
<Scene key='home' component={Home} title="Home"/>
<Scene key='home2' component={Home} title="Home2"/>
</Scene>
);
class AppContainer extends Component {
render() {
return <Router {...this.props} scenes={scenes}/>
}
}
//in file app.js
class App extends Component {
render(){
return (
<Provider store={store}>
<AppContainer />
</Provider>
);
}
}
from nativebase.
@kanekotic
I'm using it with redux it looks like:
<Provider store={store}>
<RouterWithRedux>
<Scene key="root" hideNavBar={true}>
<Scene
key="tabbar"
tabs={true}
>
<Scene
key="key1"
component={Scene1}
title="Scene1"
icon={TabIcon}
/>
<Scene
hideNavBar
key="key2"
component={Scene2}
title="Scene2"
icon={TabIcon}
/>
<Scene
hideNavBar
key="key3"
component={Scene3}
title="Scene3"
icon={TabIcon}
/>
<Scene
hideNavBar
key="key4"
component={Scene4}
title="Scene4"
icon={TabIcon}
/>
</Scene>
<Scene key="stop" schema="modal" component={Stop} />
</Scene>
</RouterWithRedux>
</Provider>
from nativebase.
I'm facing the same problem. Anybody have any solution?
from nativebase.
@anonrig what do you wanna do ?
from nativebase.
NativeBase component's style, theme even website seems a copy of Ionic. When using NativeBase most of the times I end-up injecting lot of my own custom styles into what native base provides and it takes more time since I have to read and understand their doc in-order to avoid conflict and It takes less time if I use core component and apply custom styles. NativeBase components are tightly coupled, personally I don't like this idea. I would love if they can provide individual component rather than a big ui framework, since its very hard to understand their library code. I really appreciate NativeBase Team work, but just my thought that everybody likes flexibility.
from nativebase.
@vexsnare Did you check v2.0 and it's eject feature?
from nativebase.
@sanketsahusoft Yes I checked v2.0, added it to my project and It has completely broken my existing UI, mainly Input Group. I see you guys are now using Form component instead of InputGroup so tried to use that but again I wanted to customise floating label input style different than placeholder style and I failed to do that. Reverted back to 0.5.22.
from nativebase.
FWIW, it looks like NativeBase's boilerplate Native-Starter-Kit has switched to use React Native Router Flux as of Apr 7, 2017. Here's the commit: start-react/native-starter-kit@3e7b5a1
cc: @shakdoesgithub @Crash-- @vinaydate @tarr11 @ccdwyer @StanSarr @anonrig
from nativebase.
@beausmith Awesome Thanks 👍
from nativebase.
official example at: http://docs.nativebase.io/docs/examples/navigation/RNRFBasicExample.html
from nativebase.
People of NaviteBase, there are two example of navigation on your page one is with ReactNavigation and is using your Drawer component and the other one with RNRF wich have a example of navigation to other page. Can you please do example of navigation usign RNRF and the Drawer component. Some peoples are having trouble with the Drawer component and RNRF
from nativebase.
NativeBase KitchenSink has implementation of RNRF
from nativebase.
Hi everybody!
At the moment, all repositories above projects either do not use RNRF or versions are no longer supported.
Does anyone know a way to use NativBase and RNRF?
Help.
from nativebase.
Related Issues (20)
- SSRProvider it`s not necessary in React18 HOT 1
- <Item> tag not working
- How to get theme in React Class Components ?
- Why does toast.isActive() only take effect when placement is set to bottom
- Error in React 18
- Select with InputLeftElement
- In React 18, SSRProvider is not necessary and is a noop. HOT 1
- Base style extendTheme for Button component does not work
- onPress triggers twice, when activated via Enter key
- Disabled Button is not WCAG accessible and there is no way to set alternative color with themes other than using opacity.
- when use the useToast, state value is initialized
- Codesandbox demo broken
- Demo doesn't work in Expo snack
- Menu placement is wrong
- native-base contains invalid configuration: "dependency.assets" is not allowed HOT 1
- `multiline` and `value` on the same TextArea causes input letters to be continuously added and deleted HOT 2
- Text capitalize ios issue
- Cause flicker with Next 14 HOT 1
- Radio.Group should allow un-selecting a radio button by changing `value` prop
- Input control should show red border if user type wrong string in React Native Windows
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from nativebase.