I'm trying to implement an e-commerce based app using React Native and need some pointers in regards to building a multi step ListView with multiple selection options. For example, a user wants to purchase a t-shirt. Once they click 'add to cart' I need the component to load several options i.e. shirt size, color etc. Is there a component like this?
What you are probably looking for here is an accordion or collapsible view. There are a few out there now, including:
https://github.com/naoufal/react-native-accordion
https://github.com/oblador/react-native-collapsible
Perhaps these don't exactly meet your needs, but they are a good starting point.
If you take react-native-accordion as an example, you could have your initial product view and purchase button visible inside a view and designate the purchase button as the header component that, when pressed, will reveal the shirt size and colour pickers. That should do it.
More generally, whenever you need a component you can check here (there are other resources too):
https://github.com/jondot/awesome-react-native#components
https://js.coach/react-native
Related
In my application I want to create a couple animations on my FlatList.
For example, after fetching the data and feeding it to the list I want the items that should be visible to slide from the left. When I'm scrolling each item (at the top) that supposed to disappear will slide out to the right and each item that should appear (at the bottom) should slide from the left. Is it possible in React Native?
I only managed to create one type of animation - items sliding right when they are about to disappear, but I don't have any idea how to make the items to appear from the left.
My Animated.View can receive only one type of transform. So how can create different types of input/output ranges for the top and the bottom of the list?
I tried to find some examples on the internet but couldn't find any for multiple animations, only for one type.
I think you will find React Native Reanimated's Entering and Exiting Animations API
useful for this task. It greatly simplifies animations like this in my experience.
In case you want to get more control. Using a FlatList, you can also use its onScroll prop to get the current value for YOffset (contentOffset.y) via the Reanimated useAnimatedScrollHandler. Thus you can figure out how much has been scrolled.
Which you could then use to manually apply any translateX's required to the Animated.View of whatever items the flatlist is rendering. The logic you'll of course have to figure out though. But it's a start.
Be sure to do any animation interpolates using UI thread worklets on Reanimated only. Good luck!
Before I begin trying to build something I want to check my strategy.
I think the best way to define what I would like to achieve is to build a component using a FlatList that adjusts fontSize dynamically based on the size of the View (or other more appropriately defined size limiting area) in which it is being displayed.
For example, let's say I want a FlatList of items (of data returned from an API call) that displays full-screen on Screen 1 of my app, but in a small corner of Screen 2 of my app. Here's a quick mock of the behavior I would want:
It seems like the alignment of items, flex, other styles could be written so that the proportions/positions stay the same regardless of parent view in which the FlatList is displayed, so I might only have to adjust fontSize.
Can this behavior be achieved using a FlatList and a reference to a dynamic fontSize? If so, where should the "awareness" of the parent View be stored/passed?
I'm looking for general input as to how to achieve this simply, with or without FlatList. I like using FlatList because of how well it works off the shelf for my simple tasks. Hopefully I'm not trying to make it do something it cant.
Thanks!
We start an app and there you see screen with multiple pages guide about how to use this app etc. How it works?
My suggestions: I have guide key in firebase, I load its value in local store on start. Its default value is 1. 1 - should show it, 0 - shouldn't show it. When I start I show it by default, but when user reaches the last screen, I set value of guide key to 0. And the guide is just a list of scenes (react-native-router-flux). Is it correct or not? What are best practices? What library allows me to create connected screens with dot navigation?
I recently implemented this. I would completely avoid having a guide key in firebase, because you can accomplish it locally. You can use async storage to write a boolean to storage like userDidCompleteGuide. Then, when you startup the app, if that value is not defined when reading from async storage, you know to display the guide component. After completing the guide, save that boolean to async storage. If you already use redux-persist, you can have it persist it through redux too.
I used react-navigation along with fluid transitions with react native for animating shared objects on screen.
On a basic level, it's really easy to create a dot component in react native, so don't use a library for it. It's just a view with a width, height, borderRadius, and color. Change the color to indicate an active or inactive dot depending the screen you're on. You can put a few of them in a row to show sequential steps, having the first one show an active color (like white) and the others be gray. You can then wrap your entire guide screen in a touchable opacity. That way, you can tap anywhere on the screen to advance to the next page of the guide, and when doing so, you can set the second dot to be white and the first to be gray. You could have the dots on both pages, and just change the color and nothing else when changing pages. Or you could have them be the same component and show the actual page above and dynamically change the color based on which page is active using the component state. Just set the state when changing to the next screen using the touchable opacity to indicate which should be active, and then display the page based off of that.
I am new to cross platform development using Xamarin and currently I'm into the "trial and error"-phase.
I want to create my own drawer menu, that goes from bottom and upwards on slide. The menu will have different stop stages since the buttons (navigations) will be grouped by some logical things such as "Favorites", "Frequently used" etc. where each row (group) will contain the buttons.
Is it possible to create a "master page" with a header and also the footer which is the drawer?
I stumbled upon the ControlTemplate, however to me that only seem to be a master layout that can be used in pages to get the same look-and-feel without redundant style coding. As per Xamarin documentation
Control templates provide a clean separation between the appearance of a page and its content, enabling the creation of pages that can easily be themed.
But I need to add some behavior to it such as the sliding animation etc. and I would really not like to add a container in each xaml-file that I place the drawer menu in within each xaml.cs file.
Is there a good way of achieving something like this?
All help is appreciated.
The Slide Over Kit may help. It is a free plug in that allows you to create slide in panels from any direction.
https://github.com/XAM-Consulting/SlideOverKit
I'm writing a codenameone application where I want to have an image displayed across the top of the screen as a header. I do not want to include this image in every form/container that I create so therefore I came up with the following solution:
I have a Main form which contains the image (North) and a container (Center) which will then hold all the components of the specific screen that I want to show.
I will then create containers that represent each individual screen. My idea was to add these containers to the container of the main form, one by one and that navigation between them would be handled by changing the contents of that main screen container.
But I cannot find out how to make this work. As long as I have one single screen to show it is easy... The main form container can be an embedded container that is set to show the container for the single screen. But when I try to navigate to another I cannot make it work.
So, is there another approach I should use?
If not, how should I handle navigation between screens?
Is this with a GUI builder app or with a handcoded app?
Either way a simple way of customizing this if your app has a side menu or Toolbar would be to customize the TitleArea UIID to include your background image. E.g. start with a modern theme like the Business Theme and in the designer theme change the title area border property to be "Empty".
Then define the background image to be the image you want with "scaled to fit" or "aligned bottom" depending on what you want. Make sure to include enough space in the image for the title are and use a multi image so it will adapt for other OS's.