idlework / react-native-floating-action-bar Goto Github PK
View Code? Open in Web Editor NEWA React Native floating action bar.
License: MIT License
A React Native floating action bar.
License: MIT License
Although this package depends on react-native-vector-icons, there is no way to use other Icon sets provided by that library.
Looks like I can use only FontAwesome which is baked in.
I used the floating action bar to build a navigation component. When I navigate using the icons on the action bar, it works fine. But when I change the index programmatically, the screen changes but the highlighted icon on the action bar doesn't change.
const ActionBar = (props) => {
const selectedIndex = props.inputStore.selectedNavigationIndex;
console.log('Navigation index on render: ', selectedIndex);
return (
<FloatingActionBar
items={items}
offset={25}
onPress={(index: number) =>
props.inputStore.setSelectedNavigationIndex(index)
}
position="bottom"
selectedIndex={selectedIndex}
/>
);
};
selectedIndex
is a property that is stored in the MobX store. It is initialized to 0. The navbar has 4 screens, the first screen has a button which can be used to move from first screen to the third screen. On press of the button, I update the selectedIndex
in the store. The screen changes but the highlighted icon on the navbar is still the 0th index. The console statement tells me that the index was updated. Any help will be much appreciated!
Hi,
Is there a way to make it work with React 18? It's telling me I have to downgrade to React 16. And, not sure if I want to do that.
$ npm i react-native-floating-action-bar --save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"18.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-native-floating-action-bar
npm ERR! react-native-floating-action-bar@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! C:\Users\ [...] -eresolve-report.txt
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\ [...] -debug-0.log
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.