# Available components data
In these document you can check where is the available data which 
you can override. Keep in mind that some values are required. We
mark these required values with (REQUIRED) word.

For styles overriding you must to override all data per key. For instance, if you would like to override
backButtonWrapper key you have to define all props inside (marginLeft, flexDirection, alignItems ...) otherwise 
parent props will be lost

#### Variables in use
const screenDevice = Dimensions.get('window');

#### BackButton
```
const backButton = {
  component: null,
  styles: {
    backButtonWrapper: {
      marginLeft: 13,
      flexDirection: 'row',
      alignItems: 'center',
      width: '100%'
    },
    backButtonIcon: {
      height: 20,
      width: 15,
      resizeMode: 'contain'
    },
    backButtonText: {
      fontSize: 16,
      marginLeft: 5,
      color: '#066466'
    }
  },
  props: {
    icon: require('./images/icon-back.png'),
    text: 'tornar'
  }
};
```

#### FavoriteButton
```
const favoriteButton = {
  component: null,
  styles: {
    favoriteButton: {
      width: 24,
      height: 24,
      marginRight: 10
    }
  },
  props: {
    icoUnActive: require('./images/icon-fav-normal.png'),
    icoActive: require('./images/icon-fav-active.png'),
  }
};
```
#### FavoriteMenuItem
```
const favoriteMenuItem = {
  component: null,
  styles: {
    menuItemWithIcon: {
      borderBottomWidth: 2,
      borderBottomColor: '#F6F6F6',
      paddingTop: 10,
      paddingBottom: 10,
      paddingLeft: 10,
      flexDirection: 'row',
      alignItems: 'center'
    },
    menuItemIcon: {
      height: 16,
      width: 16,
      marginRight: 10,
    },
    menuItemText: {
      fontFamily: 'Impact',
      fontSize: 14,
      color: '#faef1c',
    }
  },
  props: {
    text: 'Tus favoritos',
    icon: require("./images/icon-fav-nav.png"),
  }
};
```

#### FavoritesScene
```
const favoritesScene = {
  component: null,
  styles: {
    scrollWrapper: {
      backgroundColor: '#ffffff',
      height: '100%'
    },
    header: {
      backgroundColor: '#ffffff',
      height: 50,
      borderTopColor: '#ffffff',
      borderTopWidth: 0.5,
      borderBottomColor: '#ffffff',
      borderBottomWidth: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    title: {
      color: '#000000',
      fontSize: 18,
      fontFamily: 'Impact',
    },
    loader: {
      height: (screenDevice.height) - 103,
      alignItems: 'center',
      justifyContent: 'center',
    },
    favoriteItem: {
      flexDirection: 'row',
      paddingTop: 15,
      paddingBottom: 15,
      paddingLeft: 20,
      paddingRight: 20,
      borderBottomWidth: 1,
      borderColor: '#000000',
    },
    favoriteItemTouchable: {
      flexDirection: 'row',
      alignItems: 'center',
    },
    favoriteItemTouchableImage: {
      width: 18,
      height: 18,
      marginRight: 20
    },
    deleteFavoriteItemTouchable: {
      alignItems: 'center',
      justifyContent: 'center'
    },
    deleteFavoriteItemTouchableImage: {
      width: 16,
      height: 16
    },
    favoriteItemText: {
      fontFamily: 'Impact',
      fontSize: 16,
      width: '85%',
      color: '#000000'
    },
    noResultsWrapper: {
      paddingTop: 60,
      alignItems: 'center',
      backgroundColor: '#ffffff',
      height: '100%'
    },
    noResultsText: {
      color: '#000000',
      textAlign: 'center',
      fontSize: 18,
      fontFamily: 'Impact'
    },
    goToStartButton: {
      marginTop: 20,
      borderWidth: 1,
      borderColor: '#000000',
      backgroundColor: '#ffffff',
      borderRadius: 5,
      alignItems: 'center',
      width: 160,
      paddingTop: 10,
      paddingBottom:10,
      paddingLeft: 10,
      paddingRight: 10,
    },
    goToStartButtonText: {
      fontSize: 16,
      color: '#000000',
      fontFamily: 'Impact'
    }
  },
  props: {
    favoriteImage: require('./images/icon-fav-active.png'),
    deleteFavoriteImage: require('./images/icon-delete.png'),
    noResultsText: '¿Todavía no tienes favoritos?',
    goToHomeText: 'Volver al inicio',
    headerText: 'Tus favoritos'
  }
};
```

#### Header
```
const header = {
  component: null,
  styles: {
    rightButtonsWrapper: {
      width: '18%',
      alignItems: 'center',
      paddingRight: 5
    },
    rightButtons: {
      flexDirection: 'row',
      justifyContent: 'space-around',
      width: '100%'
    },
    header: {
      flexDirection: 'row',
      flexWrap: 'nowrap',
      justifyContent: 'space-between',
      alignItems: 'center',
      height: 50,
      borderBottomWidth: 2,
      borderBottomColor: '#ffffff',
      backgroundColor: '#ffffff'
    },
    buttonWrapper: {
      width: '18%'
    },
    logoWrapper: {
      flex: 1,
      width: '64%',
      alignItems: 'center',
    },
    logo: {
      width: 140,
      resizeMode: 'contain'
    },
    leftSponsoredButtons: {},
    leftSponsoredNavButton: {},
    leftSponsoredFavoriteButton: {},
    rightIcon: {
      tintColor: null
    }
  },
  props: {
    logoImage: require('./images/logo.png'),
    searchIcon: require('./images/icon-search.png'),
    closeIcon: require('./images/icon-close.png'),
    format: 'common', // list('common','sponsored')
    sponsoredIcon: require('./images/sponsored-logo.png'),
  }
};
```

#### MainScene
```
const mainScene = {
  component: null,
  styles: {
    webViewContainer: {
      flex: 1
    },
    webView: {
      backgroundColor: '#ffffff'
    }
  },
  props: {}
};
```

#### Menu
```
const menu = {
  component: null,
  styles: {
      menuWrapper: {
          height: screenDevice.height
        },  
      logoWrapper: {
        width: '60%',
        alignItems:'center'
      },
      logo: {
        width: 140,
        resizeMode: 'contain'
      },
      menuHeader: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        flexWrap: 'nowrap',
        borderBottomWidth: 2,
        borderBottomColor: '#ffffff',
        height: 50,
      },
      closeButtonWrapper: {
        width: '20%',
        marginLeft: 5,
        flexDirection: 'row',
        alignItems: 'center'
      },
      closeButton: {
        height: 18,
        width: 15,
        resizeMode: 'contain'
      },
      closeButtonText: {
        color: '#000000',
        marginRight: 10,
        fontSize: 16
      },
      flexItem: {
        width: '20%'
      },
      menuItem: {
        borderBottomWidth: 2,
        borderBottomColor: '#ffffff',
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 38,
        flexDirection: 'row',
      },
      menuItemWithIcon: {
        borderBottomWidth: 2,
        borderBottomColor: '#ffffff',
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 10,
        flexDirection: 'row',
        alignItems: 'center'
      },
      menuItemIcon: {
        height: 16,
        width: 16,
        marginRight: 10,
      },
      menuItemText: {
        fontFamily: 'Impact',
        fontSize: 14,
        color: '#000000',
      }
  },
  props: {
    headerLogo: require('./images/logo.png')
  }
};
```

#### MenuItem
```
const menuItem = {
    component: null,
    styles: {
      menuItem: {
        borderBottomWidth: 2,
        borderBottomColor: '#000000',
        paddingTop: 10,
        paddingBottom: 10,
        paddingLeft: 38,
        flexDirection: 'row',
      },
      menuItemText: {
        fontFamily: 'Impact',
        fontSize: 14,
        color: '#000000',
      }
    },
    props: {}
};
```

#### MenuItems 
```
const menuItems = {
  component: null,
  styles: {},
  props: {
    menuUrl: 'https://www.domain.com/uploads/static/sub_site/menu_app.json' (REQUIRED)
  }
}
```

#### NavButton
```
const navButton = {
  component: null,
  styles: {
    burgerMenu: {
      marginLeft: 13,
    },
    burgerMenuIcon: {
      width: 24,
      height: 24,
      tintColor: null
    },
  },
  props: {
    icon: require('./images/icon-nav.png')
  }
}
```

#### SafeAreaView
```
const safeAreaView = {
    styles: {
        container: {
            flex: 0,
            backgroundColor: '#ffffff'
        }
    },
    props: {
        barBackgroundColor: '#ffffff' // statusBar for Android
        barStyle: “dark-content” // 'default', 'light-content', 'dark-content'
    }
};
```

#### Search
```
const search = {
  component: null,
  styles: {
    container: {
      position: "absolute",
      top: Platform.OS === "ios" ? 65 : 49,
      left: 0,
    },
    layout: {
      flex: 1,
      flexDirection: "row",
      justifyContent: "flex-start",
      height: 50,
      backgroundColor: "#ffffff",
    },
    input: {
      borderColor: "#ffffff",
      color: "#000000",
      width: '85%',
      paddingHorizontal: 10,
      borderTopWidth: 0,
    },
    button: {
      width: '15%',
      justifyContent: 'center',
      borderColor: "#ffffff",
      borderLeftWidth: 1,
    },
    submit: {
      alignSelf: 'center',
    }
  },
  props: {
    placeholder: 'Buscar...',
    endpoint: 'https://www.domain.com/buscador.html', (REQUIRED)
    icon: require('./images/icon-search.png'),
    placeholderTextColor:"#808080",
    underlineColorAndroid:"#FAFAFA",
    queryParam:'search'
  }
}
```

#### ShareButton
```
const shareButton = {
  component: null,
  styles: {
    shareButton: {
      width: 24,
      height: 24
    },
  },
  props: {
    icon: require('./images/icon-share.png'),
    message: 'Esto te puede interesar...'
  }
};
```

#### SocialNetworkButton
```
const socialNetworkButton = {
  component: null,
  styles: {
    item: {
      width: Math.floor((screenDevice.width) / 3),
      justifyContent: 'center',
      alignItems: 'center',
      height: 60,
      borderRightColor: '#ffffff',
      borderRightWidth: 1
    },
    itemLast: {
      width: Math.floor((screenDevice.width) / 3),
      justifyContent: 'center',
      alignItems: 'center',
      height: 60
    },
    itemImage: {
      width: 22,
      height: 22,
    }
  },
  props: {}
};
```

#### SocialNetworkIcons
```
const socialNetworkIcons = {
  component: null,
  styles: {
    container: {
      flexDirection: 'row',
      marginBottom: 20,
      alignItems: 'center',
      justifyContent: 'space-between',
      height: 60,
    }
  },
  props: {
    socialNetworks: [
      {
        'name' : 'facebook',
        'url'  : 'https://www.facebook.com/your_project',
        'icon' : require('./images/icon-facebook.png')
      },
      {
        'name' : 'twitter',
        'url'  : 'https://twitter.com/your_project',
        'icon' : require('./images/icon-twitter.png')
      },
      {
        'name' : 'instagram',
        'url'  : 'https://www.instagram.com/your_project',
        'icon' : require('./images/icon-instagram.png')
      }
    ]
  }
};
```

#### WebView
```
const webView = {
  component: null,
  styles: {},
  props: {
    url: 'https://www.domain.com', (REQUIRED)
    injectedJavascript: null,
    injectJavascript: null,
    validUrlRegex: /^(https?):\/\/+(www\.)?[a-z0-9\-\.]{3,}\.[a-z]{2}/,
    marginFixed: 60,
    domainRegex: /https:\/\/domain.test.com\//,
    headers: {
        'cs-webview-app': Platform.OS
    }
  }
};
```

#### WelcomeCarousel
```
const welcomeCarousel = {
  component: null,
  styles: {
    description: {
      textAlign: 'center',
      color: '#666666',
      fontSize: 18,
      lineHeight: 20,
      fontFamily: 'Impact',
    }
  },
  props: {
    emptyBubbleColor: '#b5b5b5',
    filledBubbleColor: '#000000',
    bubbleWidth: 7,
    bubbleHeight: 7,
    bubbleHeightRadius: 15,
    bubbleMarginRight: 10,
    slides: [ (REQUIRED)
      {
        title: '¡Bienvenido!',
        description: 'A partir de ahora vamos a \n' +
          'acompañarte para que estés\n' +
          'informado en todo momento\n' +
          'y en cualquier lugar.',
        image: require('./images/slides-step-1.png'),
        imageWidth: 300,
        tintColor: null,
      },
      {
        title: 'La actualidad al instante',
        description: 'Actualidad, política, opinión,\n' +
          'análisis... En tu móvil\n' +
          'y al instante.',
        image: require('./images/slides-step-2.png'),
        imageWidth: 150,
        tintColor: null,
      },
      {
        title: 'Favoritos',
        description: 'Guarda tus contenidos favoritos\n' +
          'para tenerlos al alcance\n' +
          'en pocos segundos.',
        image: require('./images/slides-step-3.png'),
        imageWidth: 150,
        tintColor: null,
      },
      {
        title: 'Notificaciones',
        description: 'Activa las notificaciones\n' +
          'para que podamos avisarte\n' +
          'cuando se produzcan noticias\n' +
          'de última hora.',
        image: require('./images/slides-step-4.png'),
        imageWidth: 150,
        tintColor: null,
        showButton: true,
        buttonText: 'ACCEDER'
      },
    ]
  }
};
```

#### Slide
```
const slide = {
  component: null,
  styles: {
    container: {
      position: 'absolute',
      top: 0,
      bottom: 0,
      left: 0,
      right: 0,
      flexDirection: 'column'
    },
    topElement: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center'
    },
    bottomElement: {
      flex: 1,
      backgroundColor: '#ffffff',
      alignItems: 'center',
      paddingTop: 40,
    },
    title: {
      marginBottom: 20,
      fontSize: 26,
      color: '#000000',
      fontFamily: 'Impact',
      textAlign: 'center'
    },
    button: {
      borderWidth: 1,
      borderColor: '#ffffff',
      backgroundColor: '#ffffff',
      borderRadius: 5,
      marginTop: 20,
      width: 160,
      paddingTop: 8,
      paddingBottom: 8,
      paddingLeft: 10,
      paddingRight: 10,
      alignItems: 'center',
      zIndex: 3
    },
    buttonText: {
      textAlign: 'center',
      fontFamily: 'Impact',
      color: '#000000',
      fontSize: 16,
    }
  },
  props: {}
};

```

#### OneSignal
```
oneSignal = {
  appId: 'YOUR_ONESIGNAL_APPID' (REQUIRED)
}
```