Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-native-tinder-navigator
Advanced tools
Readme
This project implements a simple tinder-style navigator as shown in the demo above. It's based on the idea of having three screens that stand alongside each other on the viewport, ie. a central screen and two side-screens, one on the left and onother on the right. Each screen has its own representative icon that is shown on the application's header - the icon of the screen shown in the viewport is always centered, and depending on which screen you're in, the icons of the remaining screens are shown on the left/right edges of the header. Clicking on any of the left/right icons will cause a screen transition, also allowing for the icons themselves to animate while the transition is in progress.
The library takes care of the screen and header transitions, and leaves it up to the user to define animations that occur on the icons during the transitions. In the demo above we show how icons grow/shrink and change color during the transitions.
Setting up a navigator is as simple as this...
import React, { Component } from "react";
import { View } from "react-native";
import createTinderNavigator from 'react-native-tinder-navigator';
import HeaderIcon from './src/HeaderIcon';
const ColorScreen = ({ backgroundColor }) => (
<View style={{ flex: 1, justifyContent: 'center', flexDirection: 'column', alignItems: 'center' }}>
<View style={{ width: 300, height: 500, backgroundColor }} />
</View>
);
const MainNavigator = createTinderNavigator({
leftScreen: { component: () => <ColorScreen backgroundColor="red" />, icon: (props: any) => <HeaderIcon type="flag" {...props} /> },
centerScreen: { component: () => <ColorScreen backgroundColor="yellow" />, icon: (props: any) => <HeaderIcon type="bed" {...props} /> },
rightScreen: { component: () => <ColorScreen backgroundColor="green" />, icon: (props: any) => <HeaderIcon type="beer" {...props} /> },
inactiveSize: 20,
headerStyle: {
backgroundColor: "white",
}
});
const ExampleApp = () => <MainNavigator />;
export default ExampleApp;
An example of the HeaderIcon used in the Demo can be found in the examples in this repository.
The component was implemented due to the lack of this type of transition in other libraries such as react-navigation. At the moment in which this was developed, react-navigation did not provide screen transitions from left to right, and the header transitions were difficult to customise. We have thereafter integrated this project into others that are using react-navigation with excellen results, given that this navigator behaves as any other screen in the app.
npm install --save react-native-tinder-navigator
The API is extremely simple. We expose a single HOC (high order component) called createTinderNavigator
to which you pass down the 3 screens that the navigator is built with, plus some additional props. Here you can find the Flow types for the props passed to the HOC:
type Screen = {
/** Actual screen content */
component: Class<React$Component<*, *>>,
/** icon component bound to the screen */
icon: Class<React$Component<*, *>>,
};
type Params = {
/** Component used for the left screen. */
leftScreen: Screen,
/** Component used for the center screen. */
centerScreen: Screen,
/** Component used for the right screen. */
rightScreen: Screen,
/** Size of the icons when they are rendered on the left or right side, as inactive components. */
inactiveSize: number,
/** Styles passed down to the header. */
headerStyle: Object,
};
git clone https://github.com/joaquindk/react-native-tinder-navigator.git
cd example
npm install
react-native run-ios
This has just kicked off, so feel free to contribute and improve this. I'll be delighted to help.
MIT
FAQs
A tinder style navigator that allows you to navigate between three adjacent screens with smooth header transitions.
The npm package react-native-tinder-navigator receives a total of 1 weekly downloads. As such, react-native-tinder-navigator popularity was classified as not popular.
We found that react-native-tinder-navigator demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.