Skip to content

Plain JS ES6 class works with latest RN#17

Open
phoenixbox wants to merge 1 commit into
lwansbrough:masterfrom
phoenixbox:imports-update
Open

Plain JS ES6 class works with latest RN#17
phoenixbox wants to merge 1 commit into
lwansbrough:masterfrom
phoenixbox:imports-update

Conversation

@phoenixbox

@phoenixbox phoenixbox commented Jul 12, 2016

Copy link
Copy Markdown

@lwansbrough Updated the component to use plain JS ES6 classes which works with newest versions of react-native

🚀

@ghost

ghost commented Jul 27, 2016

Copy link
Copy Markdown

TOP!

Actually had to change the styling part, as it was not working correctly with this:

this.style = props.style;

@phoenixbox

Copy link
Copy Markdown
Author

Hey @alexanderniebuhr what change did you have to make? Can you paste the code snippet here?

@ghost

ghost commented Jul 29, 2016

Copy link
Copy Markdown

<View style={[styles.background, this.style.backgroundStyle, this.style]}> <Animated.View style={[styles.fill, this.style.fillStyle, { width: fillWidth }]}/>

To

<View style={[styles.background, this.props.backgroundStyle, this.props.style]}> <Animated.View style={[styles.fill, this.props.fillStyle, { width: fillWidth }]}/>

I did change this two lines back to the old ones, so I could use the fillStyle prop as shown in the readme from the module in my main class component :) There might be an other way to set fillStyle, but I want to set it in my class and not in the node_modules folder

@phoenixbox

Copy link
Copy Markdown
Author

@alexanderniebuhr ah ok good catch! I missed that because I was using default stylings, tried to customize it and I see what you mean. Thanks for the heads up!

I'll update the PR 🚀 👍 🌈

@ghost

ghost commented Jul 30, 2016

Copy link
Copy Markdown

No probs. I think there might be, a way with your option, but for me it was the easiest to change it back :)

@phoenixbox

Copy link
Copy Markdown
Author

@alexanderniebuhr ok I made an update, the style override works for me now

You can test it in your project via this if you like 👍

"react-native-progress-bar": "git+https://github.com/phoenixbox/react-native-progress-bar.git#imports-update"

@ghost

ghost commented Jul 30, 2016

Copy link
Copy Markdown

I'll try soon , and will post feedback here :)

@phoenixbox

Copy link
Copy Markdown
Author

cool!

@ghost

ghost commented Jul 30, 2016

Copy link
Copy Markdown

Yeah style works, but then I had to change one thing more:

export default class ProgressBar extends Component {
to
class ProgressBar extends Component {

And adding following line at the end:

module.exports = ProgressBar;

As without I will get following error:
simulator screen shot 30 07 2016 10 46 02

@phoenixbox

Copy link
Copy Markdown
Author

@alexanderniebuhr what did you import look like when you used the version as:

export default class ProgressBar extends Component {}

did it look like this?

import ProgressBar from 'react-native-progress-bar';

@ghost

ghost commented Aug 2, 2016

Copy link
Copy Markdown

I used import from the readme of the initial module

Von meinem iPhone gesendet

Am 02.08.2016 um 10:01 schrieb Shane Rogers notifications@github.com:

@alexanderniebuhr what did you import look like when you used the version as:

export default class ProgressBar extends Component {}
did it look like this?

import ProgressBar from 'react-native-progress-bar';

You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

@phoenixbox phoenixbox changed the title Plain JS ES6 class works with RN >= 0.29 Plain JS ES6 class works with latest RN Aug 11, 2016
@phoenixbox

Copy link
Copy Markdown
Author

@alexanderniebuhr @lwansbrough updated ❤️

@phoenixbox

Copy link
Copy Markdown
Author

@lwansbrough beep 🚀 :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant