diff --git a/example/screens/CardScreen.js b/example/screens/CardScreen.js
index 8499fed85..19140b397 100644
--- a/example/screens/CardScreen.js
+++ b/example/screens/CardScreen.js
@@ -1,41 +1,34 @@
import React from 'react';
-
import {
View,
StyleSheet,
ScrollView,
- Image
+ Image,
} from 'react-native';
-
import {
RkButton,
RkText,
RkCard,
- RkTheme
+ RkTheme,
} from 'react-native-ui-kitten';
-
-import {UtilStyles} from '../style/styles';
import Icon from 'react-native-vector-icons/FontAwesome';
-import {ImageIcon} from '../components/imageIcon'
+import { UtilStyles } from '../style/styles';
+import { ImageIcon } from '../components/imageIcon';
export class CardScreen extends React.Component {
static navigationOptions = {
- title: 'Cards'
+ title: 'Cards',
};
- constructor(props) {
- super(props);
- }
-
render() {
- let likeStyle = [styles.buttonIcon, {color: RkTheme.colors.accent}];
- let iconButton = [styles.buttonIcon, {color: RkTheme.current.colors.text.hint}];
+ const likeStyle = [styles.buttonIcon, { color: RkTheme.colors.accent }];
+ const iconButton = [styles.buttonIcon, { color: RkTheme.current.colors.text.hint }];
return (
-
-
+
+ automaticallyAdjustContentInsets
+ style={[UtilStyles.container, styles.screen]}
+ >
@@ -43,27 +36,28 @@ export class CardScreen extends React.Component {
Subtitle
-
+
- Far far away, behind the word mountains, far from the countries Vokalia and
- Consonantia, there live the blind texts.
+
+ Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind texts.
+
-
+
18 Likes
-
+
2 Comments
-
+
6 Shares
-
+
-
@@ -71,131 +65,129 @@ export class CardScreen extends React.Component {
Subtitle
-
+
- Far far away, behind the word mountains, far from the countries Vokalia and
- Consonantia, there live the blind texts.
+
+ Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind texts.
+
-
+
18
-
+
2
-
+
6
-
-
-
+
+
Elena Zhukova
6 minutes ago
-
-
-
-
+
+
+
- Far far away, behind the word mountains, far from the countries Vokalia and
- Consonantia, there live the blind texts.
+
+ Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind texts.
+
-
+
18
-
+
2
-
+
6
-
-
-
+
+
-
+
-
-
+
Header
Subtitle
- Far far away, behind the word mountains, far from the countries Vokalia
- and
- Consonantia, there live the blind texts.
+
+ Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind texts.
+
- SHARE
+ SHARE
EXPLORE
-
-
+
- Header
+ Header
-
+
-
-
+
-
Subtitle
- Far far away, behind the word mountains, far from the countries Vokalia
- and
- Consonantia, there live the blind texts.
+
+ Far far away, behind the word mountains, far from the
+ countries Vokalia and Consonantia, there live the blind texts.
+
- SHARE
+ SHARE
EXPLORE
-
-
+
-
- Header
- Subtitle
+
+ Header
+ Subtitle
- SHARE
+ SHARE
EXPLORE
@@ -208,40 +200,43 @@ export class CardScreen extends React.Component {
Subtitle
-
- The Big Oxmox advised her not to do so, because there were thousands of
- bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen.
+
+
+ The Big Oxmox advised her not to do so, because there were thousands of
+ bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text
+ didn’t listen.
+
- SHARE
+ SHARE
EXPLORE
- )
+ );
}
}
let styles = StyleSheet.create({
screen: {
backgroundColor: '#f0f1f5',
- padding: 12
+ padding: 12,
},
buttonIcon: {
marginRight: 7,
fontSize: 19.7,
},
footer: {
- marginHorizontal: 16
+ marginHorizontal: 16,
},
avatar: {
width: 42,
height: 42,
borderRadius: 21,
- marginRight: 17
+ marginRight: 17,
},
dot: {
fontSize: 6.5,
@@ -258,11 +253,11 @@ let styles = StyleSheet.create({
top: 173,
},
footerButtons: {
- flexDirection: 'row'
+ flexDirection: 'row',
},
overlay: {
justifyContent: 'flex-end',
paddingVertical: 23,
- paddingHorizontal: 16
- }
-});
\ No newline at end of file
+ paddingHorizontal: 16,
+ },
+});
diff --git a/src/components/card/rkCard.js b/src/components/card/rkCard.js
index b91bb5569..45cf0fea2 100644
--- a/src/components/card/rkCard.js
+++ b/src/components/card/rkCard.js
@@ -117,43 +117,42 @@ export class RkCard extends RkComponent {
imgOverlay: {},
};
- process(elem, readyStyles) {
- const props = elem.props || {};
- const styles = Object.keys(props)
- .filter(prop => prop.startsWith(RkCard.attrName))
- .map(prop => readyStyles[this.mapPropAttributeToStyle(prop)]);
- if (elem.props) {
- styles.push(elem.props.style);
- }
- return this.copyElement(elem, { style: styles }, readyStyles);
+ mapPropAttributeToStyle(prop) {
+ const name = prop.substring(RkCard.attrName.length);
+ return name.charAt(0).toLowerCase() + name.slice(1);
}
- copyElement(elem, props, readyStyles) {
- if (typeof elem === 'string') return elem;
- const propsToClone = ({
- ...props,
- });
- if (elem.props && elem.props.children) {
- propsToClone.children = Array.isArray(elem.props.children) ?
- React.Children.map(elem.props.children, (child) =>
- this.process(child, readyStyles)) : this.process(elem.props.children, readyStyles);
+ cloneView(view, props, styles) {
+ const cloneProps = { ...props };
+ if (view.props && view.props.children) {
+ const subviewMapping = subview => this.renderChildView(subview, styles);
+ cloneProps.children = React.Children.map(view.props.children, subviewMapping);
}
- return React.cloneElement(elem, propsToClone);
+ return React.cloneElement(view, cloneProps);
}
- mapPropAttributeToStyle(prop) {
- const name = prop.substring(RkCard.attrName.length);
- return name.charAt(0).toLowerCase() + name.slice(1);
+ renderChildView(view, styles) {
+ return view ? this.renderView(view, styles) : null;
+ }
+
+ renderView(view, styles) {
+ const viewStyles = Object.keys(view.props || {})
+ .filter(prop => prop.startsWith(RkCard.attrName))
+ .map(prop => styles[this.mapPropAttributeToStyle(prop)]);
+ if (view.props) {
+ viewStyles.push(view.props.style);
+ }
+ return typeof view === 'string' ? view : this.cloneView(view, { style: viewStyles }, styles);
}
render() {
- const { container, ...definedStyles } = this.defineStyles();
+ const { container, ...containerStyles } = this.defineStyles();
const { style, ...viewProps } = this.props;
- return this.process(
+ return this.renderView(
{this.props.children}
,
- definedStyles,
+ containerStyles,
);
}
}