reactnativequicenotes

app.js

React Native Quick Notes
-----------------------------------------
<View  onLayout={this._handleLayout} /> 
------------------------------------------------------------
onLayout  { nativeEvent : { layout: {x, y, width, height} } }

-This event is fired immediately once the layout has been calculated
-But the new layout may not yet be reflected on the screen at the same time the event is received
  (Especially if a layout animation is in progress)
 
 -----------------------------------------------------
 <View  onLayout={this._handleLayout} />
   _handleLayout(e)=>{
         const { width } = e.nativeEvent.layout
   
  if (Math.round(width) !== Math.round(this.state.containerWidth)) {
        this.setState({ containerWidth: width, });
        this.requestAnimationFrame(() => {
           this.goToPage(this.state.currentPage);
        });
    }
   }
---------------------------------------------------------


------------------------------------------------
Children Özelliklerini Alma
------------------------------------------------
_children(children = this.props.children) {
      return React.Children.map(children, (child) => child);
}

render(){
  const cldStyles = this._children().map((child)=>child.props.style )
  console.log(cldStyles);
}


Aynı propslar ile bir elementi yaratmak istiyorsan :React.Children
Yeni propslar ile bir elementi yaratmak istiyorsan :React.cloneElement

---------------------------------------------------------------

---------------------------------------
requestAnimationFrame
----------------------------------------
Daha smooth (1000/60 frame ya 60fps) animasyonlar yapmak için 
setInterval yerine kullanabilirsin.Örnek Kullanım;

var globalID;

function repeatOften() {
  $("<div />").appendTo("body");
  globalID = requestAnimationFrame(repeatOften);
}

$("#start").on("click", function() {
  globalID = requestAnimationFrame(repeatOften);
});

$("#stop").on("click", function() {
  cancelAnimationFrame(globalID);
});
------------------------------------------------------------------

-------------------------------------------------------------------------------
const StaticContainer = require('react-native/Libraries/Components/StaticContainer');

class StaticContainer extends React.Component {

  shouldComponentUpdate(nextProps: Object): boolean {
    return !!nextProps.shouldUpdate;
  }

  render() {
    const child = this.props.children;
    return (child === null || child === false)
      ? null
      : React.Children.only(child);
  }

}

module.exports = StaticContainer;


This component should be used when you know 
  that a subtree of components will never need to be updated

  const someValue = ...; // We know for certain this value will never change.
    return (
      <StaticContainer>
        <MyComponent value={someValue} />
      </StaticContainer>
    );



---------------------------------------------------------------------------
React.Children.only(object children)
Return the only child in children. Throws otherwise