@omegabigdata/react-native-omega-components v1.0.5

Introduction

TODO: Give a short introduction of your project. Let this section explain the objectives or the motivation behind this project.

Getting Started

TODO: Guide users through getting your code up and running on their own system. In this section you can talk about: 1. Installation process 2. Software dependencies 3. Latest releases 4. API references

Build and Test

TODO: Describe and show how to build your code and run the tests.

Contribute

TODO: Explain how other users and developers can contribute to make your code better.

If you want to learn more about creating good readme files then refer the following guidelines. You can also seek inspiration from the below readme files:

• ASP.NET Core
• Visual Studio Code
• Chakra Core

Responsive Klasörü

-  Genişlik, Yükseklik ve Yazı Boyutunun duyarlılığının yazıldığını klasördür.Ekranların genişliğini,yüksekliğini veya yazı boyutunu ayarlarken bu klasörden faydalanırız.

ColorTheme Klasörü

- Temel renkleri bulundurduğumuz klasördür.

AnimatedAlert Klasörü

- Uygulamanın bir işleme cevap olarak verdiği; uyarı, başarılı veya hata bilgilerini animasyonlu bir alert şeklinde ekrana sunar.Tıkladığınızda AnimatedAlert 'in açılması istenen yere 
"setIsAlertVisible(true)" olarak ayarlanıp yazılır.

Örnek Kullanım :

import AnimatedAlert from '@omegabigdata/react-native-omega-components/src/AnimatedAlert';

const App = () => {
const [isAlertVisible, setIsAlertVisible] = useState(false);

return (
      ....
    <AnimatedAlert
        isVisible={isAlertVisible}
        iconSource={Icons.AlertCheck}
        isCanceling={false}
        title="Güncelleme Yüklendi"
        text=" Uygulamanız güncellendi ve kullanıma hazır.Uygulamayı yeniden başlattıktan sonra güncel versiyonu kullanabilirsiniz."
        themeColor={ColorTheme.Quaternary}
        buttonClick={() => {
            CodePush.restartApp();
        }}
        onRequestClose={() => {
            setIsAlertVisible(false);
        }}
    />
);

}; export default App;

AnimatedBottomNavigation Klasörü

- Alt bar navigasyonunu animasyonlu bir şekilde sunar.Klasörün içerisinde "BottomTabIcon" dosyası da bulunur.BottomTabNavigatoru kullandığımız yere BottomTabIcon ve AnimatedBottomNavigation ayarlanarak yazılır.

Örnek Kullanım :

import AnimatedBottomNavigation from '@omegabigdata/react-native-omega-components/src/AnimatedBottomNavigation';

const App = () => {

return (
      ....

   <Tab.Navigator
     tabBar={({ state, descriptors, navigation }) => {
    if (state?.index === state?.routes?.length - 1) {
      return null;
    }
    return (
       <AnimatedBottomNavigation
      state={state}
      descriptors={descriptors}
      navigation={navigation}
      themeColor="#B8566A"
      activeTextColor={Colors.White}
      inactiveTextColor={Colors.White}
      background={Images.Background}
      curveRange={2} // isteğe göre eğrinin aralığı 
      curveShrink={5}// isteğe göre eğrinin daralması verilir.
    />
    );
  }}
>
  <Tab.Screen
    name={ScreenNames.HOME}
    component={Home}
    options={{
      unmountOnBlur: true,
      tabBarLabel: 'Ana Sayfa',
      tabBarIcon: ({ focused }) => (
        <BottomTabIcon
        focused={focused}
        constantIconSource={Icons.Home}
        focusedColor={Colors.White}
        unfocusedColor={Colors.White}
        iconStyle={styles.icon} //icon stili ve boyutu ayarlanabilir.
      />
      ),
    }}
  />
  ...
  </Tab.Navigator>
);

}; export default App;