wix / react-native-ui-lib Goto Github PK

Maybe I missed it, but it would be nice to have a few instructions about how to install/test the demo.

Thanks

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).

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
	}

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.

The following example warning appears:

The link in the docs is down, can anybody explain how to use it?

https://wix.github.io/react-native-ui-lib/docs/LoaderScreen/

When I attempt to render out ListItems 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.

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
}

A sample code that I use in my code somehow ends up with complete ellipse for the button like below:

Is there any parameter in button tag that can be use to make a better button shape ?

Windows 7
Android Emulator SDK 16

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.

Just verified
this commit

Denies the usage of attributes that does not contain text10/text20...text100 in their name

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

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)

need to change picker modal to scrollview

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>

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

https://stackoverflow.com/questions/49110458/react-native-flexbox-align-items-vertical/49115026#49115026

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"
}
}

@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

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>

At the moment Toast without customisation has transparency. This creates usability problems, since it appears over other components in the app.

Shadow is displayed on iOS but not on Android.

        <Button
          marginT-10
          backgroundColor="#6E9BC1"
          label="Register"
          labelStyle={{ fontWeight: "600" }}
          enableShadow
          onPress={() => this.phoneLogin()}
        />

When I use Buttonwith link modifier, the default color is black instead of blue30.
Thanks

It seems that HMR is not working when changing attributes on Views or Texts.

Is this a known issue?

In order to understand more how the UILib works, we need to add better documentation.

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.

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?

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. 👍

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.

Plz wish me a dream, support bg-green like background-green.
bg = 2 char count
background = 9 char counts

Thanks yo dream wisher!
<3

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.

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()

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

NetInfo.fetch() is deprecated.
Use NetInfo.getConnectionInfo() instead

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.

I found that it passes this.onBlur to RNTextInput but this.onBlur is undefined

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

• react-native-ui-lib 2.0.61
• expo 19.0.1 (RN 46)

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);
  }

Some issues while using <Carousel/> component:

• loop is ignored, it always looping
• when first time render onPageChanged been called 2 time, first time with the last index and second time with the correct index

How do I change the textcolor for the placeholder prop in TextInput & TextArea?

After change component in ListItem from TouchableHighlight to TouchableOpacity props onHideUnderlay and onShowUnderlay not available.

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",

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.

Please use ViewPropTypes instead of View.propTypes

Ex: https://github.com/wix/react-native-ui-lib/blob/master/src/components/card/CardSection.js#L16

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

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