wix / react-native-ui-lib Goto Github PK
View Code? Open in Web Editor NEWUI Components Library for React Native
Home Page: https://wix.github.io/react-native-ui-lib/
License: MIT License
UI Components Library for React Native
Home Page: https://wix.github.io/react-native-ui-lib/
License: MIT License
Shadow is displayed on iOS but not on Android.
<Button
marginT-10
backgroundColor="#6E9BC1"
label="Register"
labelStyle={{ fontWeight: "600" }}
enableShadow
onPress={() => this.phoneLogin()}
/>
Hi, I took the liberty of creating a public chat in the discord facing React-Native. With the intention of uniting the React-native community and improving communication.
I'm creating a channel for public discussions about your project. To avoid flooding "chat" on your github. If you can support the initiative, great! Just share the link below xD
I'm adding RN only projects to this public chat service. And I commit myself to manage chat rooms.
You would just need to observe the chat related to your project.
Channel #wix-react-native
here's the link
https://discord.gg/RvFM97v
Cheers.
In order to understand more how the UILib works, we need to add better documentation.
I got below warning when using Picker component
"react": "16.0.0",
"react-native": "0.50.3",
"react-native-ui-lib": "^2.0.150"
Warning: Failed prop type: Invalid props.style key 0
supplied to Image
.
Bad object: {
"0": 98,
"tintColor": "#459FED",
"marginRight": 8
}
Hi ,
First of all a great work.While I was trying to align the Text +91 with a TextInput in a single row in iOS & Android,I was not able to align it...Is it a Problem ? Please correct me if i have made a mistake.
<KeyboardAwareScrollView contentContainerStyle={styles.container} keyboardShouldPersistTaps="always">
<Text orange30 text20>Mobile No.</Text>
<View style={{flexDirection:'row',alignItems:'center',justifyContent: 'flex-start',flexWrap:'wrap'}}>
<Text style={{width:100}} orange30 text40>+91</Text>
<TextInput style={{width: 300}} text30 placeholder="Mobile No" keyboardType={'numeric'}
value={this.state.mobile} dark10 maxLength={10}
underlineColor={{focus: Colors.orange60, error: Colors.purple50}}
onChangeText={mobile => this.setState({mobile})}/>
</View>
<View marginT-30 center>
<Button text70 white background-orange30 label="Send OTP" onPress={this._sendOTP.bind(this)}/>
</View>
</KeyboardAwareScrollView>
styles
container: {
flex: 1,
backgroundColor: 'white',
paddingTop : 180,
paddingHorizontal : 25
}
Hi,
In the future upgrades,it is better to import PropTypes from 'prop-types'; rather than importing from react.
Ability to change colors of buttons at least
It seems that HMR is not working when changing attributes on Views or Texts.
Is this a known issue?
Plz wish me a dream, support bg-green
like background-green
.
bg = 2 char count
background = 9 char counts
Thanks yo dream wisher!
<3
When making a release build on Android an error appears:
Error
assets_icons_check.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
from
> Task :app:bundleReleaseJsAndAssets
...
myapp/android/app/build/intermediates/res/merged/release/drawable-xhdpi/node_modules_reactnativeuilib_src_assets_icons_check.png: error: uncompiled PNG file passed as argument. Must be compiled first into .flat file..
error: failed parsing overlays.
> Task :app:processReleaseResources
Failed to execute aapt
com.android.ide.common.process.ProcessException: Failed to execute aapt
at com.android.builder.core.AndroidBuilder.processResources(AndroidBuilder.java:796)
at com.android.build.gradle.tasks.ProcessAndroidResources.invokeAaptForSplit(ProcessAndroidResources.java:551)
at com.android.build.gradle.tasks.ProcessAndroidResources.doFullTaskAction(ProcessAndroidResources.java:285)
at com.android.build.gradle.internal.tasks.IncrementalTask.taskAction(IncrementalTask.java:109)
at sun.reflect.GeneratedMethodAccessor66.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73)
Version
"react-native": "0.53.3",
"react-native-ui-lib": "^3.3.32",
NetInfo.fetch() is deprecated.
Use NetInfo.getConnectionInfo() instead
Hello, Thanks to the folks at wix for another great library.
I am trying to apply a border to the avatar component using a ContainerStyle Prop, but the additional styles seem to be filtered out by this function (source):
extractContainerStyle(props) {
let containerStyle = {};
if (props.containerStyle) {
containerStyle = _.pickBy(props.containerStyle, (value, key) => {
return key.includes('margin') || _.includes(['alignSelf', 'transform'], key);
});
}
return containerStyle;
}
Is there a reason only certain styles are passed through to this component? (I ask because the listitem component has this function commented out).
Hey, this is an amazing feature and I would love to use it!
The thing is, I don't necessary have access to the ref pointer where my highlight logic is.
Can you add support to getTarget by testId or some other static prop?
Thanks!! <3
@inbalTish @ethanshar
Package.json:
{
"name": "wewo",
"version": "0.1.0",
"private": true,
"devDependencies": {
"babel-jest": "22.0.6",
"babel-preset-react-native-stage-0": "^1.0.1",
"fs-extra": "^4.0.2",
"jest": "22.0.6",
"react-test-renderer": "16.2.0",
"replace-in-file": "^3.0.0"
},
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"rename": "node ./bin/rename.js",
"start": "react-native start",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"fbjs": "^0.8.16",
"react": "^16.0.0",
"react-native": "^0.51.0",
"react-native-firebase": "^3.2.7",
"react-native-navigation": "^1.1.397",
"react-native-ui-lib": "^3.3.28",
"react-navigation": "^1.4.0"
}
}
I'm trying to use TabBar in a side-project, but the text won't render. Not sure if I am doing something wrong (I already checked the component file) or if there is a problem with TabBar. Let me know if you need more info.
import React, { Component } from 'react';
import { TabBar, Text } from 'react-native-ui-lib';
export default class App extends Component {
render() {
return (
<TabBar>
<TabBar.Item label='Test'>
<Text text30>HI</Text>
</TabBar.Item>
<TabBar.Item label='Test2'>
<Text text30>HI</Text>
</TabBar.Item>
</TabBar>
)
}
}
This project was built with create-react-native-app.
Just verified
this commit
Denies the usage of attributes that does not contain text10/text20...text100 in their name
How do I change the textcolor for the placeholder prop in TextInput & TextArea?
Please use ViewPropTypes
instead of View.propTypes
Ex: https://github.com/wix/react-native-ui-lib/blob/master/src/components/card/CardSection.js#L16
Hey,
There is some prop errors when testing component that includes TextInput.
console.error node_modules/fbjs/lib/warning.js:33
Warning: Failed prop type: Invalid prop `cancelIcon` supplied to `Moda.TopBar`.
in Moda.TopBar (created by TextInput)
console.error node_modules/fbjs/lib/warning.js:33
Warning: Failed prop type: Invalid prop `iconSource` supplied to `Button`.
in Button (created by Moda.TopBar)
in Moda.TopBar (created by TextInput)
console.error node_modules/fbjs/lib/warning.js:33
Warning: Failed prop type: Invalid prop `source` supplied to `Image`.
in Image (created by Button)
in Button (created by Moda.TopBar)
Testing the TextInput on a Genymotion/Android, i hit a case where event.nativeEvent.contentSize returns undefined. I think it would be safer for onChange to test for contentSize before the assignment:
onChange(event) {
if (Constants.isAndroid && event.nativeEvent && event.nativeEvent.contentSize) {
const {height} = event.nativeEvent.contentSize;
this.setState({height});
}
_.invoke(this.props, 'onChange', event);
}
I'm having trouble to move Views around when keyboard is open. After searching about how can I solve this problem I found the following component:
https://facebook.github.io/react-native/docs/keyboardavoidingview.html
And I think this would be great to have inside react-native-ui-lib. What do you think?
PS: I'm not sure how to implement this, just giving the idea.
Maybe I missed it, but it would be nice to have a few instructions about how to install/test the demo.
Thanks
The Modal
component's enableModalBlur
works great on iOS.
However, I get this critical breaking error on Android:
Error: [ReactNativeBlur]: BlurView cannot contain any child views on Android. You should use "position: absolute" on the BlurView, and place other views in front of it.
This error occurs when I try to launch the modal in question. Previous to launching the modal, I see this yellow box warning:
Warning: Failed prop type: The prop `viewRef` is marked as required in `BlurView` but its value is `undefined`.
Not entirely sure what's happening here, or if it's my fault, but it seems the BlurView
setup with this Modal
component is broken on Android.
Here's my code:
<Modal
visible={ui.modals.myModal.open}
onRequestClose={this.handleClose}
animationType='slide'
transparent
hardwareAccelerated
enableModalBlur
>
<Container>
<Header>
<Left>
<Button
onPress={this.handleClose}
transparent
>
<Text>Close icon</Text>
</Button>
</Left>
<Body>
<Text style={styles.headerTitle}>Choose something</Text>
</Body>
<Right />
</Header>
<Content contentContainerStyle={styles.content}>
<Grid>
<Row>
<Col style={styles.imageContainer}>
<Image
style={styles.image}
resizeMode='contain'
source={item.image}
/>
</Col>
</Row>
</Grid>
</Content>
</Container>
</Modal>
Dear all,
I found there're some "React.PropTypes.string,React.PropTypes.xxx" in the module
Therefore, with React 0.50.3, the error will occur
undefined is not object (evealuating '_react2.default.PropTypes.string')
because React.PropTypes is not existing. Should change to PropTypes only
The link in the docs is down, can anybody explain how to use it?
https://wix.github.io/react-native-ui-lib/docs/LoaderScreen/
With react 16.0.0-beta.5 and react native 0.49.3, PropTypes not in 'react'. So, app will be crashed
Change to 'prop-types" module please
At the moment Toast without customisation has transparency. This creates usability problems, since it appears over other components in the app.
When I use Button
with link
modifier, the default color is black instead of blue30
.
Thanks
After change component in ListItem from TouchableHighlight to TouchableOpacity props onHideUnderlay and onShowUnderlay not available.
How do I disable click for custom renderItem on Picker.Item ?
I am using react-moment to display my datetime.
I manage to render everything fine but the disabled item.
any suggestion?
Thanks ;D
Dear all,
For ActionSheet on iOS (not Android), when we touch the option, onDismiss() is called before the onPress() in each option call. Therefore, if we use options in redux or state, after onDismiss, we clear the options, the ActionSheet re-render again and no options. So, the onPress is never called.
We can work around by no clear options after onDismiss()
Hi,
I try to change the placeholderTextColor
when there is an input with length > 0 like this:
<TextInput
...
onChangeText={(text) => this.setState({hasInput: text.length > 0})}
placeholderTextColor={this.state.hasInput ? Colors.dark50 : Colors.dark10}
...
/>
But the placeholderTextColor
never change.
Any help?
Hi
Card is producing a grey background along the border with some width,please find the code and image attached.
Env :
"react-native-ui-lib": "2.0.70"
React Native : 0.47.1
style
cardContainer:{ marginRight: 10, marginLeft:10, marginTop:10, borderWidth: 1, borderColor: '#D3D3D3', ...Platform.select({ ios: { backgroundColor : 'transparent' }, android: { backgroundColor : 'white' } }) },
<Card borderRadius={12} containerStyle={styles.cardContainer} enableShadows={false} onPress={viewBlogDetails.bind(this,
${_id},
${title})}> <Card.Section body> <Card.Section header> <Text text40 orange40>{title}</Text> </Card.Section> <Card.Section right> <Card.Item> <Text text90 color={Colors.orange20}>{createdby}</Text> <Text text90> | {moment(createddate).format("YYYY-MM-DD HH:mm")}</Text> </Card.Item> </Card.Section> <Card.Image style={{marginBottom:10,marginTop:10}} height={120} imageSource={picture} /> <Card.Section> <Text text70 color={Colors.dark10}>{overview}</Text> </Card.Section> <Card.Section footer> <Text text90 color={Colors.dark50}>{likes} Likes</Text> <Card.Item> <Icon name="share-alt" size={20} color={Colors.orange20} /> </Card.Item> </Card.Section> </Card.Section> </Card>
Or something like:
<Avatar status={Avatar.status.online} />
<Avatar status={Avatar.status.away} />
<Avatar status={Avatar.status.offline} />
To make it customizable but allow only one status.
What do you think? I can implement that if you wish. ๐
tmp.json
file is empty and causes a flow type error.
I had to ignore it (.*/node_modules/react-native-ui-lib/tmp.json
) in my .flowconfig.
Do you know how to avoid the manual "ignore"?
Thanks
It seems that react-native-interactable is required.
When compiling for android in CI, everything breaks.
Failed to capture snapshot of input files for task ':app:bundleReleaseJsAndAssets' property '$1' during up-to-date check.
> Could not list contents of '/home/travis/build/ueno-llc/react-native-starter/node_modules/react-native-interactable/{ios,android}'. Couldn't follow symbolic link.
When looking at the android setup, it is added in ./android/settings.gradle
but has no project dependency in ./android/app/build.gradle
.
@Inbal-Tish
We have an issue in the following line
getHeight
is being called in a renderTextInput
function.
It's impossible to setState inside a render.
it also throws a warning
I don't have time to write, them, but it would be great if someone did. As far as I can tell, there is not typescript support for this.
Hi,
The font size is bit bigger in Android compared to iOS for the following font sizes text10,20,30 while others seem to remain almost the same in typography.It would be great if this issue is fixed.
When I try to run yarn install
in the project the following error occurs:
blodo@DESKTOP-VN0G79D MINGW32 /c/projects/react-native-ui-lib (master)
$ yarn install --verbose
yarn install v0.27.5
verbose 0.571 Checking for configuration file "C:\\projects\\react-native-ui-lib\\.npmrc".
verbose 0.572 Checking for configuration file "C:\\Users\\blodo\\.npmrc".
verbose 0.572 Checking for configuration file "C:\\Program Files\\nodejs\\.npmrc".
verbose 0.572 Checking for configuration file "C:\\projects\\react-native-ui-lib\\.npmrc".
verbose 0.572 Checking for configuration file "C:\\projects\\.npmrc".
verbose 0.573 Checking for configuration file "C:\\projects\\react-native-ui-lib\\.yarnrc".
verbose 0.573 Checking for configuration file "C:\\Users\\blodo\\.yarnrc".
verbose 0.573 Found configuration file "C:\\Users\\blodo\\.yarnrc".
verbose 0.573 Checking for configuration file "C:\\Program Files\\nodejs\\.yarnrc".
verbose 0.573 Checking for configuration file "C:\\projects\\react-native-ui-lib\\.yarnrc".
verbose 0.573 Checking for configuration file "C:\\projects\\.yarnrc".
verbose 0.575 current time: 2017-09-06T12:34:25.850Z
[1/4] Resolving packages...
verbose 0.78 Performing "GET" request to "https://registry.yarnpkg.com/hoist-non-react-statics".
verbose 0.782 Performing "GET" request to "https://registry.yarnpkg.com/react-native-interactable".
verbose 1.2 Request "https://registry.yarnpkg.com/hoist-non-react-statics" finished with status code 200.
verbose 1.208 Request "https://registry.yarnpkg.com/react-native-interactable" finished with status code 200.
[2/4] Fetching packages...
verbose 1.256 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/react-native-blur/-/react-native-blur-3.1.2.tgz".
verbose 1.261 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/babel-cli/-/babel-cli-6.24.1.tgz".
verbose 1.269 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz".
verbose 1.269 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/babel-preset-react-native/-/babel-preset-react-native-1.9.1.tgz".
verbose 1.271 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/enzyme/-/enzyme-2.9.1.tgz".
verbose 1.271 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/eslint/-/eslint-3.19.0.tgz".
verbose 1.274 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/eslint-config-airbnb/-/eslint-config-airbnb-14.1.0.tgz".
verbose 1.279 Performing "GET" request to "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-4.0.0.tgz".
verbose 23.267 Error: connect ETIMEDOUT 10.42.124.63:443
at Object.exports._errnoException (util.js:1024:11)
at exports._exceptionWithHostPort (util.js:1047:20)
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1150:14)
error An unexpected error occurred: "https://repo.dev.wixpress.com/artifactory/api/npm/npm-repos/react-native-blur/-/react-native-blur-3.1.2.tgz: connect ETIMEDOUT 10.42.124.63:443".
info If you think this is a bug, please open a bug report with the information provided in "C:\\projects\\react-native-ui-lib\\yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
I found that it passes this.onBlur to RNTextInput but this.onBlur is undefined
Some issues while using <Carousel/>
component:
loop
is ignored, it always loopingonPageChanged
been called 2 time, first time with the last index and second time with the correct indexWhen I attempt to render out ListItem
s inside a FlatList
instead of a ListView
, nothing is returned:
<FlatList
data={routes}
renderItem={item => (
<ListItem
height={100}
onPress={() => this.handleRedirect(item.screenName)}
>
<Icon name={item.icon} style={styles.iconLarge} />
<Text>{item.displayName}</Text>
</ListItem>
)}
/>
Not sure what's happening behind the scenes here, but ListView
is technically deprecated so support for FlatList
would be great.
need to change picker modal to scrollview
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.