-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Components backlog #91
Comments
Are you accepting PRs for any of these? |
Yep |
@necolas I started on an initial version of /* @flow */
import * as React from 'react';
import type { StyleFlowType } from '../../../types/style';
import { ScrollView, View } from 'react-native-web';
type PropsFlowType = {
ItemSeparatorComponent?: React.ComponentType<any>,
ListFooterComponent?: React.ComponentType<any>,
ListHeaderComponent?: React.ComponentType<any>,
contentContainerStyle?: StyleFlowType,
data?: Array<any>,
horizontal?: boolean,
keyExtractor?: (item: any) => string,
renderItem: (obj: { index: number, item: any }) => ?React.Element<any>,
style?: StyleFlowType,
};
const FlatList = ({
ItemSeparatorComponent,
ListFooterComponent,
ListHeaderComponent,
contentContainerStyle = {},
data = [],
horizontal = false,
keyExtractor,
renderItem,
style = {},
}: PropsFlowType = {}): React.Node => (
<ScrollView
contentContainerStyle={contentContainerStyle}
horizontal={horizontal}
style={style}
>
{ListHeaderComponent &&
<ListHeaderComponent />
}
{data.map((item, index): React.Node => (
<View
key={keyExtractor ? keyExtractor(item) : index}
>
{renderItem({ index, item })}
{(ItemSeparatorComponent && index < data.length - 1) &&
<ItemSeparatorComponent />
}
</View>
))}
{ListFooterComponent &&
<ListFooterComponent />
}
</ScrollView>
);
export default FlatList; |
Thanks but I don't think so |
Is work ongoing anywhere to create FlatList, SectionList, VirtualizedList, etc.? |
@Connorelsea see this PR to bring in Virtualized List: #474 |
Is there an easy way we can already mock out some of these components? I'm using a Modal and I especially want to implement the "visible" prop, the rest is way less important to me at the moment |
At my company we are willing to maintain this project and contribute with code because we depend on it. They have proposed me to do a fork but I'm not willing to do it and I preffer to have all our changes upstream. If maintainers are busy at this moment to review and accept pull-requests, could you be able to give me push permissions so I can move it forward? |
I'm not too busy to review PRs. But some PRs are so far off being good enough that I basically need to rewrite them myself :) |
Some of them like modal or WebView can use third-party dependencies... |
I can confirm that the iOS polyfill for native DrawerLayoutAndroid component works on I could be able to do a pull-request for that, what would be the correct name it should be exported? |
@piranna Did your company end up doing a fork? |
Still not, we have been able to find workarounds for own issues. |
Note for Slider you could use https://github.com/jeanregisser/react-native-slider. |
@necolas i'm correct to think the Picker code you added is still a stub right. As far as i can tell i cannot yet add picker components (for web) based on what's in master now..? |
Picker is in master - https://github.com/necolas/react-native-web/blob/master/src/components/Picker/index.js. Will be in the next minor release |
I think https://github.com/Flipkart/recyclerlistview can replace Lists in web until we don't have original lists components. |
@necolas, would you accept pull-request using dependencies? Almost all the missing APIs and components have some compatible implementation like Modal, Lists and WebView, it would just be a matter of use them as dependencies and export them so there would not be need of doing hacks to use them, and also you would not need to maintain their code... So far we are having dificulties to use https://github.com/n4kz/react-native-material-dropdown because it makes usage fo Modal, and point is support is added on react-native-web (yours or on a pull-request), or we would need to modify that library in a custom and incompatible way... :-/ |
A drop in Modal replacement is https://www.npmjs.com/package/react-native-web-modal. I modified @joncursi's FlatList implementation to be more compatible with the default FlatList https://gist.github.com/grit96/26d17a508525c248617546d5ca0d0fef. |
Thank you @grit96 ! |
If you want to add support for a feature manually you can update the webpack config alias from alias: {
'react-native': 'react-native-web'
} to alias: {
'react-native': path.resolve(__dirname, './custom-react-native-web.js')
} with the following file content for const RNWeb = require('react-native-web')
// add any component override here:
// note the .default for ES6 libraries
RNWeb.Modal = require('react-native-web-modal').default
module.exports = RNWeb This makes other libraries that use modals automatically compatible with web 👍 |
Nice trick @EyMaddis! Kudos! :-D |
@necolas by the looks of the post at the top, FlatList and SectionList are not yet supported. is this going to happen please? If so do you have an ETA. I tried to use FlatList and Section but nothing gets displayed :( |
@IncredibleMrTim you can use a custom implementation of the FlatList (here) using the details provided by @EyMaddis above. |
For anybody interested, based on the @EyMaddis sugestion I've developed a wrapper module that piggy-backs on top of Comments, pull-requests and any help are welcome :-) |
Yay.. Finally react-native is almost true cross platform framework. Great work Mr.@piranna. |
Well, in fact, one of the dependencies I'm using is a previous effort called react-native-web-extended that has a Navigator component, but since the project is abandoned since a year ago and was developed as a fork, I did a pull-request isolating the extra components and updating the dependencies, and doing so I found that it was developed using On the other hand, my wrapper still needs some work, for example there's a bug on |
FlatList has a little tick next to it in the above list, but all I'm getting in a div with a red border. Is it still yet to be implemented? |
@necolas do you have an up to date list of available components that can be used with RNW please? |
Some of them like |
Regarding
Then react-navigation works pretty well. One other fix I did was to hide off-screen stuff by implementing a custom transition:
This will add the |
You might want to surface issues with react navigation on their repo /cc @brentvatne. |
PR's welcome
The text was updated successfully, but these errors were encountered: