Created
January 20, 2019 20:42
-
-
Save codediodeio/8d59623a3ccac79e9168122b21c4a766 to your computer and use it in GitHub Desktop.
React Native Components in Flutter https://facebook.github.io/react-native/docs/state & https://facebook.github.io/react-native/docs/style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
Stream<bool> interval = | |
Stream.periodic(Duration(seconds: 1), (i) => (i % 2 == 0)) | |
.asBroadcastStream(); | |
class Blink extends StatelessWidget { | |
String text; | |
Blink({Key key, this.text}) : super(key: key); | |
@override | |
build(context) { | |
return StreamBuilder( | |
stream: interval, | |
builder: (context, snapshot) { | |
return snapshot.data ? Text(text) : Container(); | |
}); | |
} | |
} | |
class BlinkApp extends StatelessWidget { | |
@override | |
build(context) { | |
return Column(children: [ | |
Blink(text: 'I love to blink'), | |
Blink(text: 'Yes blinking is so great'), | |
Blink(text: 'Why did they ever take this out of HTML'), | |
Blink(text: 'Look at me look at me look at me') | |
]); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
class Blink extends StatefulWidget { | |
String text; | |
Blink({Key key, this.text}) : super(key: key); | |
BlinkState createState() => BlinkState(); | |
} | |
class BlinkState extends State<Blink> { | |
bool _isShowingText = true; | |
BlinkState() { | |
Stream.periodic(Duration(seconds: 1)).listen((v) => setState(() { | |
_isShowingText = !_isShowingText; | |
})); | |
} | |
@override | |
Widget build(BuildContext context) { | |
return _isShowingText ? Text(widget.text) : Container(); | |
} | |
} | |
class BlinkApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return Column(children: [ | |
Blink(text: 'I love to blink'), | |
Blink(text: 'Yes blinking is so great'), | |
Blink(text: 'Why did they ever take this out of HTML'), | |
Blink(text: 'Look at me look at me look at me') | |
]); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { AppRegistry, Text, View } from 'react-native'; | |
class Blink extends Component { | |
constructor(props) { | |
super(props); | |
this.state = { isShowingText: true }; | |
setInterval(() => ( | |
this.setState(previousState => ( | |
{ isShowingText: !previousState.isShowingText } | |
)) | |
), 1000); | |
} | |
render() { | |
if (!this.state.isShowingText) { | |
return null; | |
} | |
return ( | |
<Text>{this.props.text}</Text> | |
); | |
} | |
} | |
export default class BlinkApp extends Component { | |
render() { | |
return ( | |
<View> | |
<Blink text='I love to blink' /> | |
<Blink text='Yes blinking is so great' /> | |
<Blink text='Why did they ever take this out of HTML' /> | |
<Blink text='Look at me look at me look at me' /> | |
</View> | |
); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
var bigBlue = TextStyle( | |
color: Colors.blue, | |
fontWeight: FontWeight.bold, | |
fontSize: 30 | |
); | |
var red = TextStyle(color: Colors.red); | |
class LotsOfStyles extends StatelessWidget { | |
build(context) { | |
return Column( | |
children: [ | |
Text('just red', style: red), | |
Text('just bigBlue', style: bigBlue), | |
Text('big blue, then red', style: bigBlue.merge(red)), | |
Text('red, then big blue', style: red.merge(bigBlue)), | |
]); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React, { Component } from 'react'; | |
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; | |
const styles = StyleSheet.create({ | |
bigblue: { | |
color: 'blue', | |
fontWeight: 'bold', | |
fontSize: 30, | |
}, | |
red: { | |
color: 'red', | |
}, | |
}); | |
export default class LotsOfStyles extends Component { | |
render() { | |
return ( | |
<View> | |
<Text style={styles.red}>just red</Text> | |
<Text style={styles.bigblue}>just bigblue</Text> | |
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text> | |
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text> | |
</View> | |
); | |
} | |
} | |
// skip this line if using Create React Native App | |
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment